Extjs 4 Combo box not loading for first time (after combo is set with form data)

Question

I am having combobox with in window->form->combo, iam binding data from grid to combo using form.loadRecord(record).

My issue is:

After binding the data, i am trigger the combo to change the combo data ,For the first time combo expand little and hide automatically after second click only combo items loads correctly.

{
    xtype: 'combobox',
    editable: false,
    id: 'USERTYPECmbo',
    queryMode: 'remote',
    displayField: 'USERTYPE',
    store: Ext.create('Ext.data.Store', {
        autoLoad: true,
        fields: ['USERTYPE'],
        proxy: {
            type: 'ajax',
            extraParams: {
                typeName: 'USERTYPE'
            },
            url: 'USERTYPE.htm',
            reader: {
                type: 'json',
                root: 'res'
            }
        },
        listeners: {
            load: function (store, options) {
                var combo = Ext.getCmp('USERTYPECmbo');
                combo.setValue(combo.getValue()); //Set the remote combo after the store loads.
            }
        }
    }),
    name: 'USERTYPE',
    fieldLabel: 'USER TYPE'
}

point me where iam going wrong or any property need to be added for component.

Answer 1

Try to add

queryMode: 'local' 

to your combobox properties

Answer 2

It's because valueField is not defined in your config object(while displayField is set). When extjs tries to load your combo he needs both value and display fields to display your combo correctly but in render time,your valueField is not yet set and he`s waiting for the ajax request sent to server and response is sent back.

In your listener you are setting the combo value while its not rendered yet.So when you click on your combo for the second time,exactly after remote JSON is loaded then combo fields are set.

{
    xtype : 'combobox',
    editable : false,   
    id:'USERTYPECmbo',  
    queryMode: 'remote',
    displayField: 'USERTYPE', 
    valueField: 'USERTYPE',//set whatever field you like in your json                        
    store :new Ext.data.Store({
        autoLoad: true,
        fields: [ 'USERTYPE' ],
        proxy: {
            type: 'ajax',
            extraParams: {typeName : 'USERTYPE'},
            url : 'USERTYPE.htm',
            reader: {
                type: 'json',
                root : 'res'
            }
        }                       
    }),
    name : 'USERTYPE',
    fieldLabel: 'USER TYPE'
}

Update: One issue i didn't notice was that you created the store using Ext.create and because of that,extjs would try to Get your JSON twice(just check it using firebug) while one request would be enough.Just use new instead of Ext.create.I tested your code in my local server and its working correctly.if you still have the same issue please provide a download link to your form js + html + Store so i could review ur code.You may download my test files built on your code and working from here.tested on FF 6 and opera 10 and IE9