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?

Answer 1

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:

1. Switch the server side code that returns the JSON to return the data with “rows” as a top level property
2. Make an Ajax call for the data, parse it manually, then feed it to your store
3. 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”