javascript - ExtJS: Multiple JsonStores from one AJAX call? - Stack Overflow

admin管理员组

文章数量:1301533

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 bine all the JSON data, each one currently has a different root property.

Edit: This is Ext 2.2, not Ext 3.

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 bine all the JSON data, each one currently has a different root property.

Edit: This is Ext 2.2, not Ext 3.

• javascript
• ajax
• optimization
• datagrid
• extjs

Share Follow edited Oct 26, 2009 at 19:37 Josh asked Oct 26, 2009 at 15:58 JoshJosh 11.1k1111 gold badges6767 silver badges111111 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

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

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

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.

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.

本文标签： javascriptExtJS Multiple JsonStores from one AJAX callStack Overflow