ExtJs 4 and Linked / Chained / Cascading Combobox (remote)

[Dafram]

Hi!

I have difficulty in using 2 linked Combobox in extjs 4.

I have 2 comboboxes:

1) cbNumsch
2) cbRevsch

My scope is to link the second combobox to the content of the first.

example:

cbNUMSCH .... cbREVSCH
100 ....................... 1
100 ....................... 2
200 ....................... 3
200 ....................... 4

If in the first I select 100, in the second i want see only 1 and 2.
If in the first I select 200, in the second i want see only 3 and 4.

My code:



var cbNumsch = Ext.create('Ext.form.field.ComboBox', {
name: 'cbNumsch',
id: 'id_cbNumsch',
fieldLabel: 'Scheda',
displayField: 'numsch',
valueField: 'numsch',
store: storeNumsch,
queryMode: 'remote',
minChars: 0,
allowBlank: false,
forceSelection: true,
queryDelay: 100,
typeAhead: true
});

...

var cbRevsch = Ext.create('Ext.form.field.ComboBox', {
name: 'cbRevsch',
id: 'id_cbRevsch',
fieldLabel: 'Revisione',
displayField: 'revsch',
valueField: 'revsch',
store: storeRevsch,
queryMode: 'remote',
minChars: 0,
allowBlank: false,
forceSelection: true,
queryDelay: 100,
typeAhead: true
});

...

function filterRevsch() {

var v_numsch = Ext.getCmp('id_cbNumsch').getValue();
storeRevsch.removeAll();
storeRevsch.load({
params: {
numsch: v_numsch
}
});
}

cbNumsch.on('select', filterRevsch);


On Select of the first combobox I load the store of the second passing the parameter numsch.

But it doesn't work :(

Someone can suggest me an example of chained combos, specific for ExtJs 4?

Thank you in advance

[mitchellsimoens]

If you are going to handle the store loading outside of the combobox then your combobox needs to use local mode not remote.

[Dafram]

If you are going to handle the store loading outside of the combobox then your combobox needs to use local mode not remote.
Thank you for the quick reply!

I tried your suggest and I had a loading issue on the second combobox.
It did render correctly only the first time I opened it.

I solved the loading issue with this code:



Ext.override(Ext.LoadMask, {
onHide: function() {
this.callParent();
}
});


Link: http://as400samplecode.blogspot.com/2012/01/extjs-cascading-combobox-java-servlet.html

But I don't know if this is the correct way...

[mitchellsimoens]

That bug should have been fixed in 4.1.0

[kpw.joseluis]

Since for now Sencha Arcuitect isn't compatible with 4.1, is there any workaorund that i can use with 4.0.7?

Many thanks.