javascript - Dynamic cell editors in grid panel

Question

I have a grid panel with columns 'code' and 'value'. The editors of cells in the 'value' column is determined by the values in the 'code' column. How do i achieve this?

I have tried the following:

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

我认为您应该使用网格列的 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']]
            })
        });
    }
  }
}