我有两个 Sencha/ExtJS4 网格,它们使用完全相同的数据(即相同的 store.proxy.url),但每个都使用不同的过滤器,因此每个都有自己的单独存储。问题是我正在进行不必要的 AJAX 调用来检索要使用的额外副本。
进行单个 AJAX 调用然后在两个商店之间共享数据以进行独立过滤的推荐方法是什么?
潜在的解决方案:
- 创建两个扩展同一个商店的类?
- 使用相同的代理实例?
- 检索一个商店然后克隆它?
Ext JS 4 框架似乎是为了让每个视图都有自己的存储而构建的。如其他答案所述,您最好的选择是创建第二个商店并将所有记录从一个复制到另一个。
function cloneStore(src, dest) {
var recs = src.getRange(); // returns array of records
dest.loadRecords(recs); // removes existing records before batch add
}
该功能的确切实现可能会有所不同,具体取决于您需要如何分散数据。如果每个网格只需要一个数据子集开始,您可以从您的 Ajax 调用初始化一个主存储,然后直接在 store.data MixedCollection 上使用过滤器创建两个子存储。
// Note: This function isn't exactly "good practice"
// Actual implementation may vary
function populateSubStores(master, storeA, storeB) {
var dataA = master.data.filter(/* filter criteria for store A */),
dataB = master.data.filter(/* filter criteria for store B */);
// dataA and dataB are MixedCollections of records
storeA.loadRecords(dataA.getRange());
storeB.loadRecords(dataB.getRange());
}
或者它的一些变体。这应该足以让您朝着正确的方向开始。
如果您真的很热情,您可以创建一种新类型的商店,它维护表示来自不同视图的过滤器状态的单独 MixedCollections,然后将每个过滤器状态作为商店返回,该商店具有相同的接口,Ext.data.Store
但具有在“ master" 存储的内部表示,以便现有视图可以在没有覆盖的情况下运行。但我不推荐它。
您可以创建一个存储的两个实例,然后使用getRange()
和add()
方法将数据从一个存储复制到另一个存储。创建两个类似乎不合理。