extjs4 - 如何在两个商店之间共享一个 AJAX 调用？

Question

我有两个 Sencha/ExtJS4 网格，它们使用完全相同的数据(即相同的 store.proxy.url)，但每个网格使用不同的过滤器，因此每个网格都有自己单独的存储。问题是我正在进行不必要的 AJAX 调用来检索要使用的额外副本。

进行单个 AJAX 调用然后在两个存储之间共享数据以进行独立过滤的推荐方法是什么？

潜在的解决方案:

• 创建两个扩展同一个存储的类？
• 使用相同的代理实例？
• 检索一家商店然后克隆它？

Answer 1

Ext JS 4 框架的构建似乎是为了让每个 View 都有自己的存储。正如其他答案中提到的，您最好的选择是创建第二个商店并将所有记录从一个商店复制到另一个商店。

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

或者其一些变体。这应该足以让您朝着正确的方向开始。

如果您真的很热衷，您可以创建一种新类型的存储，该存储维护表示来自不同 View 的过滤器状态的单独 MixedCollections，然后将每个过滤器状态作为具有相同接口(interface)的存储返回 Ext.data.Store但具有对“主”存储的内部表示进行操作的实现，以便现有 View 可以在不覆盖的情况下进行操作。但我不推荐这样做。