CODEWITHSUNDEEP
javascriptextjsextjs6
sandeshsays
sandeshsays

Reputation: 1

Dynamic cell editors in grid panel

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'
            };
        }
    }
},

Upvotes: 0

Views: 1300

Answers (1)

Sanket Bajoria
Sanket Bajoria

Reputation: 748

I think you should use getEditor option of grid column, to display it dynamically.

{ 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']]
            })
        });
    }
  }
}

Upvotes: 1

Related Questions