在 ExtJs 中创建具有两个比例的网格

Question

我是 ExtJS 的新手，我需要你的帮助来创建一个有两个尺度的网格，第一个在网格的第一列（财务，技术..），第二个在第一行网格（J+1，J+2..），对于每个 column/row 索引都有一个组合框来进行评估，如下所示：

show image

有人可以帮我吗？非常感谢。

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);
});

请参考fiddle。

希望对您有所帮助。

在 ExtJs 中创建具有两个比例的网格

Create a grid with two scales in ExtJs

extjs

extjs3