ExtJS: Multiple JsonStores from one AJAX call?

Question

I have an ExtJS based application. When editing an object, an ExtJS window appears with a number of tabs. Three of these tabs have Ext GridPanels, each showing a different type of data. Currently each GridPanel has it's own JsonStore, meaning four total AJAX requests to the server -- one for the javascript to create the window, and one for each of the JsonStores. Is there any way all three JsonStores could read from one AJAX call? I can easily combine all the JSON data, each one currently has a different root property.

Edit: This is Ext 2.2, not Ext 3.

Answer 1

The javascript object created from the JSON response is available in yourStore.reader.jsonData when the store's load event is fired. For example:

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

EDIT: To clarify, each store would need a separate root property (which you are already doing) so they'd each get the data intended.

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

Answer 2

You could get the JSON directly with an AjaxRequest, and then pass it to the loadData() method of each JSONStore.

Answer 3

You may be able to do this using Ext.Direct, where you can make multiple requests during a single connection.

Answer 4

Maybe HTTP caching can help you out. Combine your json data, make sure your JsonStores are using GET, and watch Firebug to be sure the 2nd and 3rd requests are not going to the server. You may need to set a far-future expires header in that json response, which may be no good if you expect that data to change often.

Answer 5

Another fantastic way is to use Ext.Data.Connection() as shown below :

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

        }
    });

It worked for me.