CODEWITHSUNDEEP
extjsextjs4.2
IshanAg24
IshanAg24

Reputation: 199

Populate combobox store depending on value in other combobox

I'm having two comboboxes, one each for website and domain. What I need to do is on selecting a value in first dropdown, values in other dropdown should be filtered. I've written the following code :

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' is the store I've defined for the website combobox. On 'change' event of first combobox, I'm creating the store for second (domain) combobox.

For the first time, if I choose any value in first combobox, other combobox values are getting filtered. But when I go and choose some other value in first combo, this error shows up in console even before going and clicking on second combo

Uncaught TypeError: Cannot read property 'isSynchronous' of null

Needless to say, second combo shows previous values only and following error comes when clicked

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

You can find the mentioned errors in the screenshot below

enter image description here

I'm pretty new to ExtJS and the code I've written is mostly with the help of internet. Kindly give your suggestions.

Upvotes: 1

Views: 2251

Answers (1)

Zhorov
Zhorov

Reputation: 30023

Do not create a store every time the value in the first combobox is changed. It's more reasonable to create two stores and load data on change or select event with appropriate extraParams (see @FabioBarros comment, I also use this approach). See next example, it may help you:

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

});

Upvotes: 1

Related Questions