Заполните хранилище списков в зависимости от значения в других списках

Question

У меня есть два комбинированных списка, по одному для веб-сайта и домена.Что мне нужно сделать, это при выборе значения в первом раскрывающемся списке, значения в другом раскрывающемся списке должны быть отфильтрованы.Я написал следующий код:

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'

Вы можете найти упомянутые ошибки на скриншоте ниже

I 'Я довольно плохо знаком с ExtJS, и код, который я написал, в основном с помощью Интернета.Пожалуйста, дайте ваши предложения.

Answer 1

Не создавайте магазин каждый раз, когда изменяется значение в первом поле со списком.Разумнее создать два хранилища и загрузить данные по событию change или select с соответствующим extraParams (см. Комментарий @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'
            }
        ]
    });

});