0

我正在尝试创建两个组合框，一个使用户能够选择一个州，另一个是地方政府区域 (LGA)，并拥有它，以便根据所选州过滤 LGA。我正在使用 Ext 3.4 并使用 AJAX 请求填充数据存储。过滤是通过对 Django 的 REST 查询完成的。

我相信我遇到的问题归结为变量范围，因为第一个组合框工作正常，但是一旦我选择一个状态，我就会收到一条错误消息，指出“未捕获的类型错误：无法调用未定义的方法‘请求’”尝试加载 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',
  });

});
4

2 回答 2

0

这个来自 sencha 论坛的示例可以让您了解级联组合的工作原理。我认为您的代码的主要问题是您的 lgaStore 加载方法（在 stateCombo 侦听器内）没有使用正确的方式将参数传递给 Django 进行查询。正如 naresh 提到的，你最好使用“lgaCombo.getStore().load({params:{...}});”

于 2013-09-24T23:00:04.507 回答
0

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

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

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
        })
于 2013-09-12T05:56:56.910 回答