ExtJS：来自一个 AJAX 调用的多个 JsonStores？答案

【问题标题】：ExtJS: Multiple JsonStores from one AJAX call?ExtJS：来自一个 AJAX 调用的多个 JsonStores？
【发布时间】：2010-12-10 04:24:25
【问题描述】：

我有一个基于 ExtJS 的应用程序。编辑对象时，会出现一个带有多个选项卡的 ExtJS 窗口。其中三个选项卡具有 Ext GridPanel，每个都显示不同类型的数据。目前，每个 GridPanel 都有自己的 JsonStore，这意味着总共向服务器发出四个 AJAX 请求——一个用于创建窗口的 javascript，一个用于每个 JsonStore。有什么方法可以从一个 AJAX 调用中读取所有三个 JsonStores？我可以轻松组合所有 JSON 数据，每个数据当前都有不同的root 属性。

编辑：这是 Ext 2.2，而不是 Ext 3。

【问题讨论】：

标签： javascript ajax optimization datagrid extjs

【解决方案1】：

当商店的 load 事件被触发时，从 JSON 响应创建的 javascript 对象在 yourStore.reader.jsonData 中可用。例如：

yourStore.on('load', function(firstStore) {
   var data = firstStore.reader.jsonData;
   otherStore.loadData(data);
   thirdStore.loadData(data);
}

编辑：澄清一下，每家商店都需要一个单独的 root 属性（您已经在这样做了），以便他们每个人都能获得预期的数据。

{
   "firstRoot": [...],
   "secondRoot": [...],
   "thirdRoot": [...]
}

【讨论】：

【解决方案2】：

您可以通过 AjaxRequest 直接获取 JSON，然后将其传递给每个 JSONStore 的 loadData() 方法。

【讨论】：

【解决方案3】：

您可以使用 Ext.Direct 执行此操作，您可以在单个连接期间发出多个请求。

【讨论】：

【解决方案4】：

也许 HTTP 缓存可以帮助您。结合您的 json 数据，确保您的 JsonStores 使用 GET，并观察 Firebug 以确保第二个和第三个请求不会发送到服务器。您可能需要在该 json 响应中设置一个远期过期标头，如果您希望该数据经常更改，这可能没有好处。

【讨论】：

【解决方案5】：

另一种奇妙的方法是使用 Ext.Data.Connection()，如下所示：

var conn = new Ext.data.Connection();
    conn.request({
        url: '/myserver/allInOneAjaxCall',
        method: 'POST',
        params: {
           // if you wish too
        },
        success: function(responseObj) {
            var json = Ext.decode(responseObj.responseText);

           yourStore1.loadData(json.dataForStore1);
           yourStore2.loadData(json.dataForStore2);            

        },
        failure: function(responseObj) {
            var message = Ext.decode(responseObj.responseText).message;
            alert(message);

        }
    });

它对我有用。

【讨论】：