ExtJS: Multiple JsonStores from one AJAX call?

ajax, datagrid, extjs, javascript, optimization

Solution

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": [...]
}

Problem

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.

Original source