PDA

View Full Version : Second combo-box not getting populated after choosing value in first one



netemp
2 Sep 2011, 1:29 AM
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 different line in case1 and case2
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 to 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.

zhxhdean
2 Sep 2011, 2:08 AM
http://www.sencha.com/forum/showthread.php?145685-ExtJS-4-combo-load-data

may be help for you

netemp
2 Sep 2011, 3:24 AM
Thanks for sharing the link. But my issue was related to the code not working without alert message.

It got resolved with the the following solution:




select:function(combo, record){
var combo = Ext.getCmp('secondComboBoxId');
combo.store.load({
callback:function(r, options, success) {
combo.setValue(valueToBeSet);
}
});




The only confusing thing which is still there is that why the things didn't work even when autoLoad:true wasset for the second combobox. Why a callback has to be written after store load when the store is already loaded in case of autoLoad:true?

Any idea?

skirtle
3 Sep 2011, 2:01 PM
With autoLoad: true set it should work the way you expect, there must be something else going on.

As you haven't included the configs for your comboboxes or stores we can only speculate. A common mistake is to forget to add queryMode: 'local' on the combobox but I'm not sure exactly why this would cause the problem you're describing.

One other thing, it's unrelated to your problem but you should change this:


record[0].data.vslCd

to:


record[0].get('vslCd')

netemp
4 Sep 2011, 10:27 PM
Thanks for the reply Skirtle.

queryMode:local did the trick. Thanks. Now the dependent combo-box is getting populated when the first combo's value is selected, and there is no need to use the callback function for loading the store of second combobox.

Though, for now, I am still using the callback function as using queryMode:local is causing another issue, which is, that now if user tries populating the second combo-box directly then the values are not displayed in the store list, that is, I get to see a blank list!

Below is the config code I have for both the combo-boxes:

Combo 1:

{
xtype: 'combo',
id: 'voyageMonitoringViaNoId',
name: 'voyageMonitoringViaNoName',
fieldLabel: 'VIA',
store: storeViaNoVar,
displayField: 'viaNo',
valueField: 'viaNo',
queryMode: 'remote',
typeAhead: true,
minChars:2,
hideTrigger:true,
forceSelection:true
listeners: {
select: function (combo, record) {
var combo = Ext.getCmp('voyageMonitoritngVesselCodeId');
/* combo.setValue(record[0].data.vslCd); *///This works when combo2 queryMode is set to local
combo.store.load({
callback: function (r, options, success) {
combo.setValue(record[0].data.vslCd);
}
});
Ext.getCmp('voyageMonitoringVesselNameId').setValue('Vessel Code = ' + record[0].data.vslNm);
}
}
}



Combo2:

{
xtype: 'combo',
id: 'voyageMonitoritngVesselCodeId',
name: 'voyageMonitoritngVesselCodeName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
queryMode: 'local',
typeAhead: true,
minChars:2,
hideTrigger:true,
forceSelection:true
}


As soon as I replace queryMode:local with queryMode:remote, then the list is diplayed. I have also attached the screenshot.

Would be greatful if you could throw some light at it. Thanks.

Also, as mentioned by you - replace
record[0].data.vslCd with
record[0].get('vslCd').

Is there any particular reason behind this?

Thanks for all your help so far.

skirtle
5 Sep 2011, 2:00 AM
Add the following listener to your second combobox:


listeners: {
beforequery: function(options) {
options.forceAll = true;
}
}

You've configured your comboboxes to act as auto-completes and that's exactly what they're doing. When you type in the box it filters the options to those that start with the text currently typed in the box. If that text doesn't appear you'll get an empty list.

When you set queryMode: 'remote' the responsibility for filtering the list is passed to the server. Presumably your server is ignoring the parameters being passed to it and returning the full list anyway? This would lead to you seeing the full dropdown as desired.

The listener I've posted above will be called just before filtering is performed. Setting the forceAll flag will force the combobox to show all options no matter what was typed.


...

Is there any particular reason behind this?

Directly accessing an object's properties violates encapsulation and removes any opportunity to add in a hook or an override. Further, it is theoretically possible for the data property to be called something other than data, depending on the persistenceProperty. Accessing data directly is a bad habit that was prevalent in previous versions of ExtJS but most of the documentation has now been updated to push people towards using get() instead. Following 'best practices' usually helps to avoid being stung by changes in future versions.

netemp
6 Sep 2011, 4:44 AM
Skirtle - You are a RockStar!

Thanks for taking time out and replying back with forceAll:true, and also for sharing the issue related to using data property directly.

Kudos to you!