EXTJS Load JSONStore to grid after asynchronous get

Question

I have a JSON store that I would like to auto load into a grid.panel. Unfortunately, after it completes the asynchronous get, nothing is populated in the grid. Firebug shows that the JSON was retrieved successfully.

store:

var datasetStore = new Ext.data.JsonStore({
    root: 'rows',
    fields: ['griddap', 'Subset', 'tabledap', 'Make A Graph', 'wms', 'Title', 'Summary', 'Info', 'Background Info', 'RSS', 'Email', 'Institution', 'Dataset ID'],
    proxy: new Ext.data.HttpProxy({
        url: 'http://localhost:8080/proxy.php?u=http://coastwatch.pfeg.noaa.gov/erddap/info/index.json'
        }),
    autoLoad: true
});

grid:

var datasetListingGridPanel = new Ext.grid.GridPanel({
        id: 'datasetListingGridPanel',
        preventHeader: true,
        store: datasetStore,
        layout: 'fit',
        viewConfig: {
            forceFit:true,
            fitcontainer:true
        },
        columns: 
        [
            {
                header: 'Dataset Title', 
                dataIndex: 'Title'
            }
        ]
        });

EDIT - JSON

{
    "table": {
        "columnNames": ["griddap", "Subset", "tabledap", "Make A Graph", "wms", "Title", "Summary", "Info", "Background Info", "RSS", "Email", "Institution", "Dataset ID"],
        "columnTypes": ["String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String"],
        "rows": [
            ["", "", "", "", "", "", "", "", "", "", "", "", ""],
            ["", "", "", "", "", "", "", "", "", "", "", "", ""]
         ]
    }
}

I took out the values as they were very long.

Any ideas on what is going wrong?

score 3 · Answer 1 · edited Dec 11 '12 at 10:03

This is because the store's load is asynchronous. Thus, the grid loads first and finally the stores, where the data you require for the grid is.

This discussion could be helpful for you: http://www.sencha.com/forum/showthread.php?119836-Store-asynchronous-loading-and-Form-loading/page2

Use of callback function could be a solution for you too:

yourStore.load({  
  callback: function() {  
    //here you can be sure that the store is loaded.  
    }  
});

score 3 · Accepted Answer · edited May 23 '17 at 12:14

Since you are using JsonStore it is apparent you are still on ExtJS-3 (rather than 4) and therefore the following link is still relevant:

http://www.sencha.com/learn/grid-faq/

That being said, looking at your JSON, the problem is that the root you are specifying, "rows", is not a top level property: rather it is nested inside of the "table" property.

Also see: extJS: reading a nested JSON

Which in turn references this: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

Below are a number of options:

Switch the server side code that returns the JSON to return the data with "rows" as a top level property
Make an Ajax call for the data, parse it manually, then feed it to your store
Extend (or look for an existing extension) the necessary ExtJS component (JsonReader?) so that it can work with the data as is, but possibly you can specify the "root" property as "table.rows"

EXTJS Load JSONStore to grid after asynchronous get

2 Answers2