PDA

View Full Version : Second combo-box not populating after 1+ selection of first combobox



kngai
9 Mar 2012, 4:47 PM
My issue is similar to this thread except the solution did not resolve it for me:
http://www.sencha.com/forum/showthread.php?145841-Second-combo-box-not-getting-populated-after-choosing-value-in-first-one

Just like that old thread, I have 2 dependent combo-boxes set up:



// Store for combo 1
var store_clcProvince = Ext.create('Ext.data.ArrayStore', {
fields: ['prov', 'name', 'nom', 'bbox'],
data: data_province,
sorters: {
property: 'name',
direction: 'ASC'
}
});

// Store for combo 2
var store_clcRegion = Ext.create('Ext.data.Store', {
model: 'CLC',
proxy: {
url: 'scripts/json-clc.php',
type: 'ajax',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'clcs'
}
},
sorters: {
property: 'name',
direction: 'ASC'
}
});

// combo 1
var formCombo_clcProvince = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select Province',
renderTo: 'formCombo-clcProvince',
width: 500,
labelWidth: 130,
queryMode: 'local',
store: store_clcProvince,
displayField: 'name',
valueField: 'prov',
autoSelect: false,
forceSelection: true,
selectOnFocus: true,
listeners: {
select: function(cmboBx, records, eOpts){
// Populate combo 2
if (formCombo_clcRegion.isDisabled()) {
formCombo_clcRegion.enable();
}
formCombo_clcRegion.reset();
formCombo_clcRegion.store.load({
params: {
'sel_prov': cmboBx.getValue()
}
});
}
}
});

// combo 2
var formCombo_clcRegion = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select Region(s)',
renderTo: 'formCombo-clcRegion',
//multiSelect: true,
displayField: 'name',
valueField: 'clc',
width: 500,
labelWidth: 130,
store: store_clcRegion,
disabled: true,
queryMode: 'local',
listeners: {
beforequery: function(options) {
options.forceAll = true;
}
}
});

Combo 1 is loaded with an Ext.data.ArrayStore. After selecting Combo 1, Combo 2 populates by loading a JSON dataset via AJAX. This only works on the first try. But subsequent selections from Combo 1 leaves Combo 2 hanging with the default loadmask "Loading..".

I simply can't figure out why. Any ideas?

Thanks

PS. I got this working in ExtJS 3. I'm new to ExtJS 4.

chramer
10 Mar 2012, 12:36 AM
Try this for the first combobox :

listeners: {
select: function(cmboBx, records, eOpts){
formCombo_clcRegion.lastQuery = null;
formCombo_clcRegion.clearValue();
store_clcRegion.load({
params: {
'sel_prov': cmboBx.getValue()
}
});
}
}

skirtle
10 Mar 2012, 5:07 AM
If you're using 4.0.7 then it's probably the known bug with combobox loadmasks:

http://www.sencha.com/forum/showthread.php?152324

There are patches on that thread and it's fixed in the 4.1 betas.