Ext Js Combobox - Synchronous call to set value

Can't we make synchronous calls with Ext.data.Store?

I have a model which I'm loading inside a store. Later I'm binding it to a combobox. This flow works fine.

But when I want to set value of combo for default selection, I get JS error saying no elements inside the store. The reason being, the ajax call to fill the store is made after all the JS is executed. I tried making async property to false, but still no luck!!!

He开发者_如何学Cre is my code snippet:

var store = new Ext.data.Store({        
    proxy: {
        type: 'ajax',
        url: '/GetAccounts',
        reader: {
            type: 'json'
        }
    },
    async: false,  //Tried this...no luck
    cache: false,
    autoLoad: true
});

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'For ',
    renderTo: 'simpleCombo',
    displayField: AccountName,
    valueField: 'AccountId',
    store: store,
    queryMode: 'local',
    forceSelection: true
});

simpleCombo.setValue(store.getAt(0).get('AccountId')); //JS ERROR AT THIS LINE. No elements in the store

Disable the combo until the store is populated. Don't mess with sync request you will freeze the whole page (or even the browser) until the requests finishes.

I posted something similar at https://stackoverflow.com/a/12918140/1449525, but I took this kind of approach:

Add listeners to your combo box so that when the combo box is actually rendered, it should try to set its value

listeners:{
    scope: this,
    afterRender: this.selectFirstComboItem
}

then add the method to your this (or wherever you prefer).

selectFirstComboItem: function(combo) {
    // This will tell us if the combo box has loaded at least once
    if (typeof combo.getStore().lastOptions !== "undefined") {
        // Grab the first value from the store
        combo.setValue(combo.getStore().first().get(combo.valueField));
    }
    else {
        // When the store loads
        combo.getStore().on("load", function(store, items){
            // Grab the first item of the newly loaded data
            combo.setValue(items[0].get(combo.valueField));
        });
    }
}