modx-combo cascading selection

After spending hours trying to figure this out,
and realized that modx have override most extjs combo with its own data store calling.

I've finally found a way to do cascading to work.

To force it to add the parameter to on call ajax to populate the list,

you will have to add it as baseParams, as the 1st time you select the drop down,

it seems to be doing a auto load.

If you attempt to reload the store without setting baseParams, the first time it got populate, it will be without your additional param.

Example:

Ext.getCmp("state").baseParams.key1 = Ext.getCmp("region").getValue();

But this baseParams only work for 1st time call. It wont work when you subsequencely reselect the parent component.

To do that, we will have to use the load.

Ext.getCmp("state").store.reload({

params: { key1: Ext.getCmp("region").getValue() }

});

This will solve the cascading selection issue.

For example of complete code:

----------------------------------------------------

lets say we have a region > state > district

Ext.getCmp("region").on("change", function() {

var oState = Ext.getCmp("state");

var oDistrict = Ext.getCmp("district");

oState.setDisabled(true);

oState.setValue('');

oState.store.removeAll();

oState.baseParams.key1 = Ext.getCmp("region").getValue();

oState.store.reload({

params: { key1: Ext.getCmp("region").getValue() }

});

oState.setDisabled(false);

oDistrict.setDisabled(true);

oDistrict.setValue('');

oDistrict.store.removeAll();

oDistrict.setDisabled(false);

});

Ext.getCmp("state").on("change", function() {

var oDistrict = Ext.getCmp("district");

oDistrict.setDisabled(true);

oDistrict.setValue('');

oDistrict.store.removeAll();

oDistrict.baseParams.key1 = Ext.getCmp("state").getValue();

oDistrict.store.reload({

params: { key1: Ext.getCmp("state").getValue() }

});

oDistrict.store.reload();

oDistrict.setDisabled(false);

});

-------------------------------------