我正在尝试创建两个组合框,一个允许用户选择一个州,另一个是当地政府区域(LGA),并且让它根据所选状态过滤LGAs。我正在使用Ext 3.4并使用AJAX请求填充数据存储。使用REST查询Django进行过滤。
我相信我遇到的问题是变量范围,因为第一个组合框工作正常但是一旦我选择了一个状态,我得到一个错误,指出“未捕获的TypeError:无法调用未定义的方法'请求”我正在尝试加载LGA组合框的数据存储的URL。我已经通过代码中的注释指出了这种情况(见下文)。我正在努力理解我需要如何重新编写代码来使事情发挥作用。如果解决方案很简单,我对编程有点新手如此道歉。我的代码如下。
提前感谢您的帮助。
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',
});
});
答案 0 :(得分:0)
您的代码在模式中的第一个错误。如果从后端模式获取数据应该是远程的。 另一个我建议您使用第一个组合框的select事件来从服务器获取数据。
这是我的两个远程获取数据的组合框
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
})
答案 1 :(得分:0)
This Example可以让您了解级联组合的工作原理。我认为你的代码的主要问题是你的lgaStore加载方法(在stateCombo监听器内)没有使用正确的方法将参数传递给Django进行查询。正如naresh所提到的,你最好使用“lgaCombo.getStore()。load({params:{...}});”