ExtJS 3.4 cascading combo box with AJAX - ajax

Question

I am trying to create two combo boxes, one enabling users to select a state and the other a local government area (LGA), and have it so the LGAs are filtered on the basis of the state selected. I'm using Ext 3.4 and populating data stores using an AJAX request. The filtering is being done with a REST query to Django.
I believe the issue I'm having is coming down to variable scope, as the first combo box works fine but once I select a state I get an error stating "Uncaught TypeError: Cannot call method 'request' of undefined" when I'm trying to load the URL for the LGA combo box's data store. I've indicated where this is happening with a comment in the code (see below). I'm struggling to understand how I need to rejig the code to make things work. I'm a bit of a newbie to programming so apologies if the solution is a simple one. My code is below.
Thanks in advance for any help.
Ext.onReady(function() {
var stateStore = new Ext.data.JsonStore({
autoDestroy: true,
url: 'states.json',
storeId: 'ste-store',
root: 'records',
id: 'ste-store',
fields: ['state']
});
var lgaStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '',
storeId: 'lga-store',
root: 'records',
id: 'lga-store',
fields: ['lga']
});
var stateCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'ste-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: stateStore,
displayField: 'state',
valueField: 'state',
listeners: {
render: function(e) {this.getStore().load()},
select: function(combo, record, index) {
var selectedState = record.get('state');
var lgaUrl = 'lgas.json?state=' + selectedState;
lgaStore.url = lgaUrl; //Error is traced back to here
lgaCombo.getStore().load();
}
}
});
var lgaCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'lga-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: lgaStore,
displayField: 'lga',
valueField: 'lga',
});
});

Answer 1

first mistake of your code in mode. If you fetching data from back-end mode should be remote.
Another i advice your use select event of first combo box to get the data from server .
here is my two combo box which fetch the data remotely
new Ext.form.ComboBox({
id:"myB",
hiddenName:'myserId',
store: myStore(),
emptyText:'Select App ...',
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
listWidth : 345,
anchor : '90%',
selectOnFocus:true,
listeners: {
// 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
select: function(combo, record, index){
var geoStorageCB = Ext.getCmp('geoCB');
geoStorageCB.getStore().proxy.setUrl('../test', true);
geoStorageCB.getStore().load({
params:{
id:combo.getValue()
}
});
}
}
}),new Ext.form.ComboBox({
id:"geoCB",
hiddenName:'geoId',
hidden : true,
store:myGeoStorage(),
emptyText:'Select GeoStorage ...',
displayField: 'storageName',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'local',
listWidth : 345,
editable: false,
maxLength: 50,
anchor : '90%',
selectOnFocus:true
})

Answer 2

This Example from sencha forum can give you an idea how cascading combo works. I think the main problem of your code is your lgaStore loading method (inside stateCombo listener) doesn't use correct way to pass parameters to Django for the query. As naresh mentioned, you'd better use "lgaCombo.getStore().load({params:{...}});"