使用AJAX的ExtJS 3.4级联组合框

我试图创建两个组合框，一个允许用户选择一个州，另一个允许用户选择一个地方政府区域（LGA），并将其设置为根据所选州过滤LGA。我正在使用ext3.4，并使用AJAX请求填充数据存储。过滤是通过对Django的REST查询完成的

我相信我遇到的问题是变量范围，因为第一个组合框工作正常，但一旦我选择了一个状态，当我尝试加载LGA组合框数据存储的URL时，我会收到一个错误，声明“UncaughtTypeError:Cannotcallmethod'request'of undefined”。我已经用代码中的注释指出了发生这种情况的地方（见下文）。我正在努力理解如何重新调整代码以使其正常工作。我是一个编程新手，所以如果解决方案很简单，我深表歉意。我的代码如下

提前感谢您的帮助

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',
  });

});

---

模式中代码的第一个错误。如果从后端模式获取数据，则应该是远程模式。 另一个我建议您使用第一个组合框的选择事件从服务器获取数据

这是我的两个组合框，可以远程获取数据

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
        }) 

从sencha论坛可以给你一个如何级联组合工作的想法。我认为代码的主要问题是您的lgaStore加载方法（在statecombolistener内部）没有使用正确的方法将参数传递给Django进行查询。正如naresh提到的，您最好使用“lgaCombo.getStore（）.load（{params:{…}}）；”