Combo box in Extjs editor grid not displaying initally

Question

I am trying to edit an information using editor grid. I have three fields, Interview By (combo), Date (date) and Performance (number), I get the date and the performance column, but the combo is not displaying the value initially. But when I click, then it shows the correct value. I am new to extjs and googled it for a solution, but could not find it. Kindly help me with a solution. Thanks in advance.

MY CODE:

initComponent: function() {
    this.createTbar(); 
    this.columns = [
        { xtype:'numbercolumn', 
          hidden:true,
          dataIndex:'interview_id', 
          hideable:false
        },
        {   xtype: 'gridcolumn',
            dataIndex: 'interview_by_employee_id',
            header: 'Interview By',
            sortable: true,
            width: 290,
            editor: {
                xtype: 'combo',
                store: employee_store,
                displayField:'employee_first_name',
                valueField: 'employee_id',
                hiddenName: 'employee_first_name',
                hiddenValue: 'employee_id',
                mode: 'remote',
                triggerAction: 'all',
                forceSelection: true,
                allowBlank: false ,
                editable: false,
                listClass : 'x-combo-list-small',
                style: 'font:normal 11px tahoma, arial, helvetica, sans-serif'


        },
        renderer: function(val){
            index = employee_store.findExact('employee_id',val); 
            if (index != -1){
                rs = employee_store.getAt(index).data; 
                return rs.employee_first_name; 
            }
        }

        },
        {   xtype: 'gridcolumn',
            dataIndex: 'interview_date',
            header: 'Date',
            sortable: true,
            readOnly: true,
            width: 100,
            editor: {
                xtype: 'datefield'
            }
        },
        {   xtype: 'numbercolumn',
            header: 'Performance',
            format:'0',
            sortable: true,
            width: 100,
            align: 'right',
            dataIndex: 'interview_performance',
            editor: {
                xtype: 'numberfield'
            }
        }
    ];
    candidate_grid_interview.superclass.initComponent.call(this);
}

and the screen shots,

Chau Chau · Accepted Answer · 2011-12-06T09:14:05

I faced the same problem and found my solution somewhere. Here is a reduced version of what I'm using. I think the key was the renderer property on the column. If your combo uses remote data, it might be loading its content after the grid is done loading - but I'm not sure it will cause the problem you're describing.

Try this concept:

var myStore = new Ext.data.JsonStore({
    autoLoad: false,
    ...            
    fields: [
        { name: 'myID', type: 'int' },
        { name: 'myName', type: 'string' }
    ],
    listeners: {
        load: function () {
            // Load my grid data.
        },
        scope: this
    }
});

var myCombo = new Ext.form.ComboBox({
    ...
    displayField: 'myName',            
    valueField: 'myID',
    store: myStore
});

var grid = new Ext.grid.EditorGridPanel({
    store: new Ext.data.ArrayStore({
        ...
        fields: [                
            ...
            { name: 'myID', type: 'int' },
            ...                   
        ]
    }),
    ...
    cm: new Ext.grid.ColumnModel({
        columns: [
        ...
        {                
            header: 'Header',
            dataIndex: 'myID',                        
            editor: myCombo,                    
            renderer: function (value) {
                var record = myCombo.findRecord(myCombo.valueField, value);
                return record ? record.get(myCombo.displayField) : myCombo.valueNotFoundText;
            }
        }]
    })            
});

myStore.load();

Combo box in Extjs editor grid not displaying initally

2 Answers