ExtJS combobox not rendering

Question

I have a combobox editor for a grid column. It is editable too. The store for the combobox has autoLoad config, set to false implying that when the user clicks on the combobox, the store is loaded. It works fine if I don't type in anything in the combobox and click on it. However, if I type something first in the combobox, then click outside and then again click on the combobox to load the dropdown, it doesn't render at all. It just shows loading and then doesn't display the drop down.

It's a very weird problem as I have similar comboboxes for other columns as well which work fine but they are not editable.

Is this anything to do with the editable config?

    var contextDropDownStoreforFactGrid = Ext.create('Ext.data.Store', {
    fields: [{name:'context',type:'string'}],
     proxy: {
         type: 'ajax',
         url: context + '/FcmServlet',
         extraParams: {
             'action': 'getContextDropDownValues'
         },
         reader: {
             type: 'json'
         }
     },
     autoLoad: false    /* load the store only when combo box is selected */
});

    editor: {
                xtype: 'combo',
                store: contextDropDownStoreforFactGrid,
                qureyMode: 'remote',
                id: 'fact_contextId',
                displayField:'context',
                valueField: 'context',
                vtype: 'alphanum',
                listeners: {
                    beforeQuery: function(query) {
                        if (contextDropDownStoreforFactGrid.getCount() != 0) {
                            contextDropDownStoreforFactGrid.removeAll();
                            contextDropDownStoreforFactGrid.load();
                        }

                    }
                }
            },
                renderer: function(value) {
                var index = contextDropDownStoreforFactGrid.find('context', value);
                if (index != -1) {
                    return contextDropDownStoreforFactGrid.getAt(index).data.context;             
                }
                return value;
            }

I have added my code, even if I remove the renderer it still has the same problem. — Arnav Sengupta

Jaran Jaran · Accepted Answer · 2013-10-02T12:17:49

You have a spelling error in your combobox configuration:

qureyMode: 'remote',

should be

queryMode: 'remote',

This is probably causing the combobox not to load data from your store.

ExtJS combobox not rendering

1 Answers