Create a grid with two scales in ExtJs - extjs

Question

I am new in ExtJS and I need your help to create a Grid with two scales, the first one in the first column of the grid(Financial, Technical..), and the second one in the first row of the grid(J+1, J+2..), and for every column/row index there's a combobox to make assessments, like this :
show image
Can anyone help me please ?
Thank you very much.

Answer 1

Ext.onReady(function () {
var renderer = function (val) {
var loop = ['Barney','Fred'];
var str = '<select name="first">';
for(var i = 0; i < loop.length ; i++){
if(val === loop[i]){
str += '<option value="'+loop[i]+'" selected>'+loop[i]+'</option>';
}else{
str += '<option value="'+loop[i]+'">'+loop[i]+'</option>';
}
}
str += '</select>';
return str;
};
var rt = Ext.data.Record.create([{
name: 'id'
}, {
name: 'fullname'
}, {
name: 'first'
}]);
var myStore = new Ext.data.Store({
// explicitly create reader
reader: new Ext.data.ArrayReader({
idIndex: 0 // id for each record will be the first element
},
rt // recordType
)
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: myStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [{
header: '',
dataIndex: 'fullname'
}, {
header: '1',
dataIndex: 'first',
renderer : renderer
}, {
header: '2',
dataIndex: 'first',
renderer : renderer
}, {
header: '3',
dataIndex: 'first',
renderer : renderer
}, {
header: '4',
dataIndex: 'first',
renderer : renderer
}]
}),
//sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
var myData = [
[1, 'Fred Flintstone', 'Fred'], // note that id for the record is the first element
[2, 'Barney Rubble', 'Barney']
];
myStore.loadData(myData);
});
Please refer fiddle.
Hope this helps.