CODEWITHSUNDEEP
javascriptextjscomboboxextjs4
Core7s
Core7s

Reputation: 147

Dynamic store not loading data in combo box extjs

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'
     }

   }
 });

Upvotes: 1

Views: 5128

Answers (1)

Michael Watson
Michael Watson

Reputation: 318

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?

Upvotes: 1

Related Questions