网格面板中的动态单元格编辑器

Question

我有一个带有'代码'和'值'列的网格面板。 “值”列中单元格的编辑器由“代码”列中的值确定。我如何实现这一目标？

我尝试了以下内容：

plugins: {
    ptype: 'cellediting',
    clicksToEdit: 1
},

listeners: {
    select: function(component, record, index) {
        debugger;
        console.log('value : ' + record.data.code);
        if (record.data.code == 'combo') {
            this.query('#colDefaultValue')[0].editor = {
                xtype: 'combo',
                allowBlank: false,
                store: [
                        [1, 'Option 1'],
                        [2, 'Option 2']
                    ]
                    // displayField: 'name',
                    // valueField: 'id'
            };
        } else if (record.data.code == 'int') {
            this.query('#colDefaultValue')[0].editor = {
                xtype: 'numberfield'
            };
        } else if (record.data.code == 'bool') {
            this.query('#colDefaultValue')[0].editor = {
                xtype: 'combo',
                allowBlank: false,
                store: [
                        [1, 'Yes'],
                        [2, 'No']
                ]
            };
        } else {
            this.query('#colDefaultValue')[0].editor = {
                xtype: 'textfield'
            };
        }
    }
},

Answer 1

我认为你应该使用grid column的getEditor选项来动态显示它。

{ text: ****,
  dataIndex: ****
  getEditor: function(record){
    if (record.data.code == 'combo') {
        return Ext.create('Ext.grid.CellEditor', {
            field: Ext.create( 'Ext.form.field.ComboBox', {
                store: [[1, 'Option 1'], [2, 'Option 2']]
            })
        });
    }
  }
}