I have a JSON store that I would like to auto load into a grid.panel. Unfortunately, after it pletes 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=.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?

I have a JSON store that I would like to auto load into a grid.panel. Unfortunately, after it pletes 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?

• javascript
• json
• extjs
• grid
• extjs3

2 Answers 2

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./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./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 ponent (JsonReader?) so that it can work with the data as is, but possibly you can specify the "root" property as "table.rows"

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./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.  
    }  
});