Question

网格的数据如下所示：

data: [{
    field1: abc
    field2: [
        {value: 0, label: Blue}, 
        {value: 1, label: Green}
    ]
},
{
    field1: def
    field2: [
        {value: 0, label: Red}, 
        {value: 1, label: Pink}
    ]
}]

网格组件配置类似于：

{
xtype: 'grid',
....
    columns: [
        {
            dataIndex: field1
        },
        {
            dataIndex: field2
            editor: {
                xtype: combobox,
                displayField: label,
                valueField: value,
                store: new someSampleStore();
            }
        }
    ]
}

现在，网格的第2列有一个组合框。对于Grid的第0行，第1列;组合框下拉列表应显示以下选项：蓝色，绿色对于Grid的第1行，第1列;组合框下拉列表应显示以下选项：红色，粉红色

我是否需要手动将数据加载到每个组合框（每行）中，或者我是否可以在列定义中指定配置，以便组合框为'field2'选取数据？

Answer 1

看看下面的代码。从本质上讲，它可以满足您的需求，但只能在首次点击后使用。我会告诉你的。 ; - ）

演示：https://fiddle.sencha.com/#fiddle/gec

Ext.application({
    name: 'Fiddle',

    launch: function() {


        var comboStore = Ext.create('Ext.data.Store', {
            fields: ['value', 'label'],
            data: [{
                name: '',
                value: ''
            }],
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
            data: [{
                firstname: "Michael",
                lastname: "Scott",
                seniority: 7,
                dep: "Management",
                hired: "01/10/2004",
                comboData: [{
                    label: 'Test1',
                    value: 'testval1'
                }, {
                    label: 'Test2',
                    value: 'testval2'
                }, {
                    label: 'Test3',
                    value: 'testval3'
                }]
            }, {
                firstname: "Dwight",
                lastname: "Schrute",
                seniority: 2,
                dep: "Sales",
                hired: "04/01/2004",
                comboData: [{
                    label: 'Dwight1',
                    value: 'testval1'
                }, {
                    label: 'Dwight2',
                    value: 'testval2'
                }, {
                    label: 'Dwight3',
                    value: 'testval3'
                }]
            }, {
                firstname: "Jim",
                lastname: "Halpert",
                seniority: 3,
                dep: "Sales",
                hired: "02/22/2006",
                comboData: [{
                    label: 'Jim1',
                    value: 'testval1'
                }, {
                    label: 'Jim2',
                    value: 'testval2'
                }, {
                    label: 'Jim3',
                    value: 'testval3'
                }]
            }, {
                firstname: "Kevin",
                lastname: "Malone",
                seniority: 4,
                dep: "Accounting",
                hired: "06/10/2007",
                comboData: [{
                    label: 'Kevin1',
                    value: 'testval1'
                }, {
                    label: 'Kevin2',
                    value: 'testval2'
                }, {
                    label: 'Kevin3',
                    value: 'testval3'
                }]
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Column Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [{
                text: 'First Name',
                dataIndex: 'firstname',
                editor: {
                    xtype: 'combobox',
                    displayField: 'label',
                    valueField: 'value',
                    store: comboStore,
                    fields: ['value', 'label']
                }
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }, {
                text: 'Hired Month',
                dataIndex: 'hired',
                xtype: 'datecolumn',
                format: 'M'
            }, {
                text: 'Department (Yrs)',
                xtype: 'templatecolumn',
                tpl: '{dep} ({seniority})'
            }],
            selType: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1,
                listeners: {
                    beforeedit: function(editor, context, eOpts) {
                        testData = context.record.data.comboData;
                        comboStore.setData(testData);
                    }
                }
            },
            width: 400,
            forceFit: true,
            renderTo: Ext.getBody()
        });
    }
});

如何处理Extjs Grid中的单元格字段

1 个答案: