Extjs combobox not displaying data

Question

I have an editor grid panel, with 2 fields. Based on the 1st field, the second field should change to a combobox with further options. For that getting the value of the 1st field on runtime is required to fire the query for the second field. The code is working fine and retriving the data. But even when the mentioned width is 350 for the second field, the combobox which appears, is very small and can't be read. Even the dropdown is not seen. I tried the ListWidth property too.. but no change in the output.

Is it because, initially the combobox is empty and I'm using the beforequery property to change the url with the id field so the combobox is not getting the data? But I can't see any errors on firebug.

I have the following code:

createGrid= function(e){
    var store= new Ext.data.Store({
        autoLoad: true,
        proxy: new Ext.data.HttpProxy({ url: ..... }) //url to get the data
        reader: new Ext.data.JsonReader({
            root: //the root,
            id: //id,
            sortInfo: {field: 'id', direction: 'ascending' },
            fields: ['id','fields']
        })
    });

    var store2= new Ext.data.store ({ 
        autoLoad: true,
        id: 'store2',
        proxy: new Ext.data.HttpProxy({ url: '  '}) //url 
        reader: new Ect.data.JsonReader({
            root: 'enums','id', fields: ['enum_id','value']
        })
    });


    var cm=new ext.grid.columnModel([
        {id:'id',name:'id',dataIndex: 'id', width: 300},
        {id:'fields', header: 'fields',width: 350, editor: new  Ext.form.ComboBox({
            name: 'combo',
            store: store2,
            width: 350,
            valueField: 'enum_id',
            displayField: 'value',
            listeners: {
                beforequery: function(query){
                    var g_n=Ext.getCmp('grid1');
                    var s_t=g_n.getSelectionModel().getSelections();
                    var record=s_t[0]; 
                    var assign_data=record.get('id');
                    var actionStore=Ext.StoreMgr.get('store2');
                    var action_combobox=Ext.getCmp('combo1');
                    actionStore.proxy.conn.url=' ',//new url which requires the 'id' field
                    actionStore.load();
                    return query;
                }
            }
        })},
    ]);


    return new Ext.grid.EditorGridPanel({
        id: 'grid1',
        store: store,
        cm:cm,
        sm: new Ext.grid.RowSelectionModel ({ singleSelect: true});
        autoExpandableColumn: 'fields',
        listeners: {
            //the other grid listeners
        }
    })
}

Please help me with this problem. Thanks in advance.

What is the version of ExtJs you are using? Also, which field is being represented by 'combo1' here which you have used in your listener 'beforequery'? As a random check, I hope that there is a match in your store fields and JSON keys coming from server. — netemp
I am using extjs-3.3.1 . And , the field 'field' in the grid panel is getting replaced by combobox once the user clicks on the 'field' cell. In the firebug, i can see the values getting retrieved. there are no errors shown in the firebug. only thing is, the combobox width is very small and dropdown also is not being shown. — user977933
the name of the combobox is 'combo1'.. sorry for the typo in the code part. — user977933
Had an issue in a UI using ExtJS and widths with respect to the Ext.form.ComboBox. Some were to short or to long and we ended up using [stackoverflow.com/questions/1459221/…. We had to make some tweaks, but the resize to fit the contents within the list worked great due to the variations in the length of the options. — subv3rsion

johniman johniman · Accepted Answer · 2012-08-20T11:02:59

 var store2 = new Ext.data.store(

Maybe you need to replace Ext.data.store with Ext.data.Store or Ext.data.JsonStore

Extjs combobox not displaying data

1 Answers