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

Posted 2023-02-26

【中文标题】在 ExtJs 中创建具有两个比例的网格

【英文标题】：Create a grid with two scales in ExtJs

【发布时间】：2017-06-14 09:25:58

【问题描述】：

我是 ExtJS 的新手，我需要您的帮助来创建一个具有两个比例的网格，第一个在网格的第一列（财务、技术..），第二个在网格的第一行(J+1, J+2..)，并且对于每个列/行索引，都有一个组合框来进行评估，如下所示：

show image

谁能帮帮我？ 非常感谢。

【问题讨论】：

是否应该代替默认的图例项（即列名和行号）或附加/作为第一行和第一列中真正停靠但不可用的单元格？

是的，这正是我要解释的，感谢您的回复！

【参考方案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 3 上做到这一点（我忘了提到我使用的是 3.4.0 版本）。谢谢！

让我检查一下 ExtJS 3.4 的可行性

太棒了！这就是我要找的，非常感谢！！