Create a grid with two scales in 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.

Should this be instead of the default legend items (i.e. column names and row number) or in addition/as real docked but unusable cells in the first row and column? — Mastacheata
Yes, that's exactly what I'm trying to explain, thanks for your reply! — Ayden J.

Ronak Patel Ronak Patel · Accepted Answer · 2017-06-20T07:58:02

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.

Create a grid with two scales in ExtJs

1 Answers