Question

I have two dependent combo-boxes and the value of second one is populated after some value in the first has been selected.

For this, I am using setValue for the second combo-box at the select event of first one.

Below are the two cases of code, here case 1 doesn’t work but case 2 works in IE9:

Case1: This doesn't work

    select:function(combo, record){
        Ext.getCmp('voyageMonitoritngVesselCode').store.load();//Loading the store of second combobox
        Ext.getCmp('voyageMonitoritngVesselCode').setValue(record[0].data.vslCd);//Setting the value in the second combo-box
    }


Case2: This works

    select:function(combo, record){
        Ext.getCmp('voyageMonitoritngVesselCode').store.load();//Loading the store of second combobox
        alert(record[0].data.vslCd);//The only difference in both cases is this line
        Ext.getCmp('voyageMonitoritngVesselCode').setValue(record[0].data.vslCd);//Setting the value in the second combo-box
    }

That is, when I write an alert statment between loading of store and setting the value, then the values gets displayed in the second combobox, but if I omit this alert then there is no value set in the combobox.

I felt that probably the store needs time to load and it could be getting this time from the alert message halt. But as a solution for this, I used autoload:true for the second combo, so that the store doesn’t have to be loaded but still the case was same – the value was not getting set without alert.

Could anyone please throw some light at this.

Browser – IE9

ExtJS – 4

Thanks in Advance.

Answer 1

The second doesn;t work because the load is an asynchron request meaning that the store is not loaded yet when you trie to set value, setting an alert before it gives it enough tme to load it … a quick fix would be:

var combo = Ext.getCmp('voyageMonitoritngVesselCode');
combo.store.load({
                callback:function(r, options, success) {
                    combo.setValue(record[0].data.vslCd);
                }
            });