Extjs Grid Column- Combo displaying key instead of value after value change

Question

I have grid which have dynamic column. When the user clicks on this column, it display list of values from that the store returns.Once they user select any value, I would like the displayfield to show the valueand not the numeric id(key) of that value.

                .....................
                ......................
                plugins : [
                                Ext.create('Ext.grid.plugin.CellEditing', {
                                    clicksToEdit: 1,
                                    pluginId: 'Editor',
                                    listeners : {
                                        delay:1,
                                        scope: this                                               
                                    }
                                })
                                ],                                  




                     doAfterFilterRendered : function() {
                        for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
                            if (ColumnGridType ==  'COMBOBOX')// base on some condition i m trying to create combo box
                                {
                                Ext.getCmp('ReportGrid').gridColumns[i].editor=  {
                                    xtype: 'combobox',
                                    forceSelection: true,
                                    id : 'idCombo'
                                    editable: false,
                                    triggerAction: 'all',
                                    allowBlank: false,                                              
                                    store: me.getColumnStoreList("Country")// which return 2 dimentional array with key value                                            

                                }                                       
                            }                                   
                        }
                        Ext.getCmp('ReportGrid').getStore().load();
                        Ext.getCmp('ReportGrid').reconfigure(Ext.getCmp('ReportGrid').store, Ext.getCmp('ReportGrid').gridColumns);
                    },
                    ......................
                    ........................

I tried following thing to display value instead of key.

doAfterFilterRendered : function() {
                                for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
                                    if (ColumnGridType ==  'COMBOBOX')// base on some condition i m trying to create combo box
                                        {
                                        Ext.getCmp('ReportGrid').gridColumns[i].editor=  {
                                            xtype: 'combobox',
                                            forceSelection: true,
                                            id : 'idCombo'
                                            editable: false,
                                            triggerAction: 'all',
                                            allowBlank: false,                                              
                                            store: me.getColumnStoreList("Country") // which return 2 dimentional array with key value,
                                             **fields: ['key', 'value']}),
                                            valueField: 'key',
                                            displayField: 'value',**


                                        }                                       
                                    }                                   


                }

Michael Michael · Accepted Answer · 2016-03-10T14:28:21

You need to add a renderer in your column grid: Something like that

renderer: function(val){
        index = me.getColumnStoreList("Country").findExact('key',val); 
        if (index != -1){
            rs = me.getColumnStoreList("Country").getAt(index).data; 
            return rs.value; 
        }

},

Source: Extjs4 combobox displayValue in grid

Extjs Grid Column- Combo displaying key instead of value after value change

1 Answers