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

【问题标题】：How to share one AJAX call between two stores?如何在两个商店之间共享一个 AJAX 调用？
【发布时间】：2012-04-19 11:25:48
【问题描述】：

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

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

可能的解决方案：

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

【问题讨论】：

我个人会克隆商店。如果您不必同时显示两个不同的结果，您也可以使用其中的一些过滤器（设置/取消设置/重置）来检索理想的结果。

标签： extjs4 store

【解决方案1】：

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 相同的接口，但具有在“主”存储的内部表示上运行的实现，以便现有视图可以在没有覆盖的情况下运行。但我不推荐。

【讨论】：

【解决方案2】：

您可以创建一个存储的两个实例，然后使用getRange() 和add() 方法将数据从一个存储复制到另一个存储。创建两个类似乎不合理。

【讨论】：