ExtJS 4如何动态更改表格的数据源？

Question

在ExtJS 4中，是否可以更改网格的存储方式?

例如，我有两个模型：

User = Ext.define('User',{
  extend: 'Ext.data.Model',
  [...],
  hasMany: 'Product'
});

Product = Ext.define('Product',{
  extend: 'Ext.data.Model',
  [...]
});

还有两个网格。 第一个网格与存储相关联，使用User模型，并从后端加载嵌套的JSON数据，例如

{
  users: [{
     id: 1,
     products: [
       {id: 1},
       {id: 2}
     ]
  }, {
     id: 2,
     products: [
       {id: 3},
       {id: 4},
       {id: 5}
     ]
  }]
}

我想要做的是，在第一个表格中单击行时，第二个表格必须显示用户的产品，而无需连接服务器。

我知道的是，user.products(); 返回一个Ext.data.Store对象。

所以想法是将第二个表格的存储更改为user.products();，但是没有grid.setStore()这样的方法 :-)

先行致谢

- sunsay

Answer 1

我认为更好的解决方案是：

     grid1.on('itemclick', function(view, record) {
         grid2.reconfigure(record.products());
     );

- pllee

---

“reconfigure” 做的不仅仅是重新绑定存储。如果有两个结构相同的存储，但只想更改网格的后备存储，则需要通过调用 getView 获取存储的 Ext.grid.View 并使用新存储调用 bindStore 方法。 - Justin Summerlin

@jMerliN，我建议不要这样做，因为它违反了API规范，你可能会看到一些奇怪的错误。当grid.getStore() != grid.getView().store时，我可以看到潜在的问题出现。我还没有运行过用例，但是grid.store.load()不会触发视图刷新。reconfigure旨在允许网格更改存储，并且没有太多开销。 - pllee

Answer 2

您正在错误地查看商店。商店永远附加在网格上，因此没有grid.setStore()。您不更改网格的存储，而是更改该网格的存储中的数据。

现在，解决您的问题的方法：
您已经正确了解到，您已经有了一个存储实例和数据。即;user.products()。但是，您仍需要为网格创建一个存储。这个存储将不会有任何数据。现在，当您需要显示产品信息时，您需要将网格的存储加载数据。您可以使用以下方法之一：

• load()
• loadData()
• loadRecord()

来将数据加载到您的存储中。在您的情况下，您可以执行以下操作：

myStore = user.products();
grid.getStore().loadRecords(myStore.getRange(0,myStore.getCount()),{addRecords: false});

- Abdel Raoof Olakara

---

更换网格中的数据源是一个常见的情况。可以使用grid.reconfigure来更改数据源或列模型。另外，addRecords的默认值为“false”。 - pllee

Answer 3

如果您想在创建网格后将存储附加到该网格，则可以使用bindStore()方法。

var store = user.products();
grid.getView().bindStore(store);

另外，您还可以使用load（），loadData（），loadRecords（）方法，并将数据复制到您的存储中。

- Sasha Brocato

Answer 4

当我需要在某些没有reconfigure（继承自Ext.form.FieldSet的自定义类）的东西上更新数据时，Abdel Olakara的答案帮了我一个忙。

但是在这种情况下，您不需要指定addRecords或getRange的范围，因为默认值已经覆盖了我们所需的内容。

这意味着您可以这样做：

myStore = user.products();
grid.getStore().loadRecords(myStore.getRange());

- Nick Knowlson