Dynamic store not loading data in combo box extjs

Question

I have two combo boxes say combo 1 and combo 2 that get populated with two different stores (say store 1 and store 2). The value in combo2 depends on what is selected in combo 1. I then query the server to get the array for combo2. In other words, my selection in combo1 determines the values for combo2. The code I have set up is not working and gives me a very generic error Error: Object doesn't support this action. I see the return values in the browser debugger so I know its not my ajax request. I think I am missing something small in the combo box that keeps the values from displaying. Please see the code below to get a better idea

   var store1 = Ext.create('Ext.data.ArrayStore', {
  model: 'store1model',
  autoLoad: true,
  autoDestroy: true,
  proxy: {
    type: 'ajax',
    url: 'backend.java'
    extraParams: {
      'param1': param1
    },
    reader: {
      type: 'json'
    }

  }
});

var store2 = Ext.create('Ext.data.ArrayStore', {
  model: 'store2model',
  autoLoad: true,
  autoDestroy: true,
  storeId: 'store2Id',
  proxy: 'memory',
  readre: {
    type: 'json'
  }
});

var panel = Ext.create('Ext.form.Panel', {
  title: 'Panel',
  id: 'PanelId',
  url: 'backened.java',
  method: 'GET',
  items: [{
    xtype: container,
    layout: 'column',
    items: [{
      xtype: 'container',
      columnWidth: .5,
      layout: 'anchor',
      items: [{
        xtype: 'combobox',
        fieldLabel: 'Combo1',
        name: 'Combo1',
        store: store1,
        displayField: 'name',
        valueField: 'name',
        anchor: '96%',
        listeners: {
          select: function(combo, records) {
            Ext.Ajax.request({
              url: 'backend.java',
              method: 'GET',
              params: {
                "param2": combo.getValue()
              },
              success: function(response) {
                var data = Ext.Msg.decode(response.responseText);
                store2.loadData(data);
              }
            });
          }
        }
      }, {
        xtype: 'combobox',
        fieldLabel: 'Combo2',
        name: 'Combo2',
        id: 'Combo2',
        store: store2,
        displayField: 'someField',
        valueField: 'someField'

      }]

    }]
  }]


});

After some searching I found may be I have to listen to event change in combo2. Not sure if that's correct and if it is how would that work? So I guess my question is two folds. Firstly, why wouldn't the above code work? Secondly, is there a better/more elegant way of doing this.

EDIT

 var store2 = Ext.create('Ext.data.ArrayStore', {
   model: 'store2model',
   autoLoad: true,
   autoDestroy: true,
   storeId: 'store2Id',
    proxy: {
     type: 'ajax',
     url: 'backend.java'
   //  extraParams: {
     //  'param2': param2
    // },
     reader: {
       type: 'json'
     }

   }
 });

Michael Watson Michael Watson · Accepted Answer · 2015-03-26T19:47:14

Looks like you assigned store1 a proxy so that you can do a store1.load(), maybe try doing the same with store2.

So you could assign the url 'backend.java' as a proxy to store2, and when combo1 gets selected, you can load the store for combo2 with the value is a param.

  {
        xtype: 'combobox',
        fieldLabel: 'Combo1',
        name: 'Combo1',
        store: store1,
        displayField: 'name',
        valueField: 'name',
        anchor: '96%',
        listeners: {
          select: function(combo, records) {
            Ext.getCmp('Combo2').getStore().load({
                params: {
                  param2: combo.getValue()
                }
            });  
          }
        }
      },

That will load combo2's store with the param2 parameter. So just assign combo2's store whatever the proxy url is. Try that perhaps?

Dynamic store not loading data in combo box extjs

1 Answers