Default value in combo not visible - extjs

0
votes

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.

2
javascriptjspextjs
which version of ExtJS are you using – Satya
It should be Extjs 4. It says, "This file is part of Ext JS 4 Copyright (c) 2011 Sencha Inc ", in the 1st two lines of my ext-all.js – Freakyuser
check this stackoverflow.com/questions/5965416/… – Satya
@Satya Followed that and added this line Ext.getCmp('decisionCombo').setValue(store.getAt('0').get('abbr')); but still on load of the document, the combo box looks like a text field. The dropdown symbol doesn't appear. – Freakyuser
I have created a fiddle here. Can anyone please help me display the combobox on load (not on click), inside the grid? – Freakyuser

2 Answers

1
votes

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.

0
votes

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 "&lt;Select...&gt;";
    }
    return value;
}