Default value in combo not visible - extjs

Question

I have grid.Panel in my extjs page. There are comboboxes in the grid. On load of the page, the combobox doesn't appear like combobox. Instead they look like empty cell. On click of the cell, they reveal the dropdown box like symbol.

var decisionComboStore = new Ext.data.ArrayStore({
   fields: ['abbr', 'action'],
   data : [
           ['proceed', 'Proceed'],
           ['upNotDone', 'Upload Not Done']
          ]
    });
var stockAuditGrid = Ext.create('Ext.grid.Panel', {
    {header: '<center><b>Decision</center>',  dataIndex: 'decision', flex:1,
        editor: {
            xtype:'combo',
                    store: decisionComboStore,
                            id: 'decisionCombo',
                           displayField:'action',
                           valueField: 'abbr',
                           mode: 'local',
                          typeAhead: false,
                emptyText: 'Select...',
            allowBlank:false
        },sortable: false, hideable: false}
 });

I don't know what else I should add to make it look like a combo box on load of the document. Also the box should display the default value.

Answer 1

You expect something that cannot happen. Editors in an Ext grid are activated only on (dbl) click and there is always only one active at a time.

If are fine with this behavior but you need only appearance of combos then you must use css to style the grid cells.

Answer 2

You can't make it look like a combo box easily.

But you can use a custom renderer on the grid column to show Select... when the record's field is empty, without actually modifying the underlying data in the store:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

Example:

renderer:function(value,meta) {
    if(value === undefined || value === null || value === "") {
        meta.style="color:#666"
        return "<Select...>";
    }
    return value;
}