根据其他组合框中的值填充组合框存储答案

【问题标题】：Populate combobox store depending on value in other combobox根据其他组合框中的值填充组合框存储
【发布时间】：2018-12-24 08:54:49
【问题描述】：

我有两个组合框，一个用于网站和域。我需要做的是在第一个下拉列表中选择一个值，其他下拉列表中的值应该被过滤。我写了以下代码：

var webSiteComboStore = Ext.create('Ext.data.Store', {
            fields : ['WebsiteNo','WebsiteName'],
            proxy : {
                url : 'getListOfWebsites',
                type : 'ajax'
            }
    });


var win= Ext.create('Ext.window.Window',{
 layout: 'anchor',
 id:'myWin',
 width:500,
 modal:true,
 resizable:true,
 autoScroll:true,
 bodyPadding:'30px',
 title:"Add "+me.clicked.text,

 items:[{
  xtype:'combo',
  fieldLabel:'Website',
  emptyText:'Select',
  anchor:'90%',
  margin:'10 30 10 20',
  multiSelect : false,
  store : webSiteComboStore,
  editable:false,
  forceSelection:true,
  displayField : 'WebsiteName',
  valueField : 'WebsiteNo',
  submitEmptyText :'false',
  listeners:{
      'change':function(){
          var comboVal = this.value;
          this.up().items.items[1].bindStore(null);
          if(this.isDirty()){
            var  filteredDomainStore =   Ext.create('Ext.data.JsonStore',{
                autoDestroy: true,
                fields:['FilteredDomainName','FilteredDomainRefno'],        

                proxy: {
                    type :'ajax',
                    url:'getListOfDomainsForWebsite.action',
                    extraParams:{
                        websiteRefno : comboVal
                    },
                    timeout:1000000,
                    reader:{
                        type:'json',
                        root:'domainsForWebsite'                
                }       
                }
                });  
            this.up().items.items[1].bindStore(filteredDomainStore);
          }

        }

  }
},{
      xtype:'combo',
      fieldLabel:'Domains',
      emptyText:'Select',
      anchor:'90%',
      margin:'10 30 10 20',
      multiSelect : false,
      store : null,
      editable:false,
      forceSelection:true,
      displayField : 'FilteredDomainName',
      valueField : 'FilteredDomainRefno',
      submitEmptyText :'false'
  }
]
});

'webSiteComboStore' 是我为网站组合框定义的商店。在第一个组合框的'change' 事件中，我正在为第二个（域）组合框创建商店。

第一次，如果我在第一个组合框中选择任何值，其他组合框值将被过滤。但是当我在第一个组合中选择其他值时，这个错误甚至在点击第二个组合之前就出现在控制台中

Uncaught TypeError: Cannot read property 'isSynchronous' of null

不用说，第二个组合只显示以前的值，点击时会出现以下错误

'Uncaught TypeError: Cannot read property 'findExact' of null'

您可以在下面的屏幕截图中找到提到的错误

我对 ExtJS 很陌生，我编写的代码主要是在互联网的帮助下。请提出您的建议。

【问题讨论】：

你能在sencha fiddle中分享你的代码吗？给出运行示例，以便在那里调试。
尝试让两个商店都创建，并且只在选择事件上'store.load({params})'，而不是每次都创建一个商店

标签： extjs extjs4.2

【解决方案1】：

不要在第一个组合框中的值每次更改时都创建商店。创建两个商店并使用适当的extraParams 在change 或select 事件上加载数据更合理（请参阅@FabioBarros 评论，我也使用这种方法）。请看下一个示例，它可能会对您有所帮助：

Ext.onReady(function(){

    var webSiteComboStore = Ext.create('Ext.data.Store', {
        fields: ['WebsiteNo','WebsiteName'],
        proxy: {
            url: 'getListOfWebsites',
            type: 'ajax'
        }
    });

    var domainStore =   Ext.create('Ext.data.JsonStore',{
        autoDestroy: true,
        fields: ['FilteredDomainName','FilteredDomainRefno'],        
        proxy: {
            url: 'getListOfDomainsForWebsite.action',
            type: 'ajax',
            extraParams:{
                websiteRefno: ''
            },
            timeout: 1000000,
            reader:{
                type: 'json',
                root: 'domainsForWebsite'                
            }       
        }
    });  

    var win = Ext.create('Ext.window.Window',{
        layout: 'anchor',
        id: 'myWin',
        width: 500,
        modal: true,
        resizable: true,
        autoScroll: true,
        bodyPadding: '30px',
        title: "Add "+me.clicked.text,
        items: [
            {
            xtype: 'combo',
            fieldLabel: 'Website',
            emptyText: 'Select',
            anchor: '90%',
            margin: '10 30 10 20',
            multiSelect: false,
            store: webSiteComboStore,
            editable: false,
            forceSelection: true,
            displayField: 'WebsiteName',
            valueField: 'WebsiteNo',
            submitEmptyText: 'false',
            listeners: {
                'change': function(f) {
                    var comboVal = f.value;
                    domainStore.proxy.extraParams = {
                        websiteRefno: comboVal
                    };
                    domainStore.load();
                }
            }
            },
            {
            xtype: 'combo',
            fieldLabel: 'Domains',
            emptyText: 'Select',
            anchor: '90%',
            margin: '10 30 10 20',
            multiSelect: false,
            store: domainStore,
            editable: false,
            forceSelection: true,
            displayField: 'FilteredDomainName',
            valueField: 'FilteredDomainRefno',
            submitEmptyText: 'false'
            }
        ]
    });

});

【讨论】：