动态存储不在组合框extjs中加载数据

时间:2015-03-26 18:38:35

标签: javascript extjs combobox extjs4

我有两个组合框说组合1和组合2,它们填充了两个不同的商店(比如商店1和商店2)。 combo2中的值取决于在组合1中选择的内容。然后查询服务器以获取combo2的数组。换句话说,我在combo1中的选择决定了combo2的值。 我设置的代码不起作用,并给出了一个非常一般的错误Error: Object doesn't support this action。我在浏览器调试器中看到了返回值,因此我知道它不是我的ajax请求。我想我在组合框中遗漏了一些小的东西,以防止显示值。请参阅下面的代码以获得更好的主意

   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'

      }]

    }]
  }]


});

经过一些搜索,我发现可能是我必须在combo2中听取事件更改。不确定这是否正确,如果它是如何工作的?所以我想我的问题是双重的。首先,为什么上述代码不起作用?其次,是否有更好/更优雅的方式来做到这一点。

修改

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

   }
 });

1 个答案:

答案 0 :(得分:1)

看起来您为store1分配了一个代理,以便您可以执行store1.load(),也可以尝试对store2执行相同操作。

所以你可以分配网址' backend.java'作为store2的代理,当combo1被选中时,你可以加载combo2的商店,其值是一个参数。

  {
        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()
                }
            });  
          }
        }
      },

这将使用param2参数加载combo2的商店。所以只需分配combo2的商店,无论代理网址是什么。试试吧?