Question

我正在尝试创建两个组合框，一个允许用户选择一个州，另一个是当地政府区域（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',
  });

});

Answer 1

您的代码在模式中的第一个错误。如果从后端模式获取数据应该是远程的。另一个我建议您使用第一个组合框的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
        })

Answer 2

来自sencha论坛的

This Example可以让您了解级联组合的工作原理。我认为你的代码的主要问题是你的lgaStore加载方法（在stateCombo监听器内）没有使用正确的方法将参数传递给Django进行查询。正如naresh所提到的，你最好使用“lgaCombo.getStore（）。load（{params：{...}}）;”

ExtJS 3.4级联组合框与AJAX

2 个答案: