ExtJS：一個AJAX調用中有多個JsonStores？

Question

我有一個基於ExtJS的應用程序。 編輯對象時，將顯示一個帶有多個選項卡的ExtJS窗口。 其中三個選項卡具有Ext GridPanels，每個顯示不同的數據類型。 當前，每個GridPanel都有自己的JsonStore，這意味着對服務器的四個AJAX請求-一個用於創建窗口的JavaScript，另一個用於每個JsonStores。 所有三個JsonStores可以通過一個AJAX調用讀取任何方式嗎？ 我可以輕松地合並所有JSON數據，每個當前都有一個不同的root屬性。

編輯 ：這是Ext 2.2，而不是Ext 3。

Answer 1

您可以使用AjaxRequest直接獲取JSON，然后將其傳遞給每個JSONStore的loadData（）方法。

Answer 2

當商店的load事件觸發時，可以在yourStore.reader.jsonData使用從JSON響應創建的javascript對象。 例如：

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

編輯：為澄清起見，每個存儲區都需要一個單獨的root屬性（您已經在做），因此他們每個都將獲得預期的數據。

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

Answer 3

您可能可以使用Ext.Direct進行此操作，在其中您可以在單個連接中發出多個請求。

Answer 4

也許HTTP緩存可以幫助您。 合並您的json數據，確保您的JsonStores使用的是GET，並觀看Firebug以確保第二個和第三個請求不會發送到服務器。 您可能需要在該json響應中設置一個遠期到期標頭，如果您希望數據經常更改，那可能就不好了。

Answer 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);

        }
    });

它為我工作。