CODEWITHSUNDEEP
jsonextjsgridpanelhttp-proxyjsonstore
ExtJs Animal
ExtJs Animal

Reputation: 33

Load static JSON data from URL for ExtJS grid panel

I tried to implement a grid panel using data from a JSON file which is located on the same domain as the Javascript file containing the ExtJs code. I'm using ExtJs 3.4.

The grid shows up but without any data in it. Firebug shows an error message that tells me that there is an error in the first line of the JSON file ("not well formed"). I have validated the JSON file and everything is ok.

Here is my code:

Ext.onReady(function () {
    var myStore = new Ext.data.JsonStore({
        url: 'data.json',
        root: 'rows',
        autoLoad: true,
        fields: [{
            name: 'person',
            type: 'string'
        }, {
            name: 'product',
            type: 'string'
        }]
    });

    var grid = new Ext.grid.GridPanel({
        id: 'gridPanel',
        title: 'Grid example',
        width: 250,
        height: 250,
        renderTo: 'grid-example',
        store: myStore,
        columns: [{
            header: 'Person',
            dataIndex: 'person'
        }, {
            header: 'Product',
            dataIndex: 'product'
        }]
    });
});

My JSON data is:

{
    "rows": [{
        "person": "Jamie Avins",
        "product": "Ladder"
    }, {
        "person": "Ed Spencer",
        "product": "Spanner"
    }]
}

Do you have any ideas what's wrong? Can somebody give me some hints?

Thanks in advance!

Seha

Upvotes: 1

Views: 6386

Answers (2)

aswininayak
aswininayak

Reputation: 973

Use:

reader: {
    type: 'json',
    root: 'rows'
}

in your JsonStore and validate your json response.

Hope it will work for you.

Upvotes: 1

John Kinzie
John Kinzie

Reputation: 361

I tested your code and the exact JSON string cut and pasted from your example. It worked just fine using Grails to return the string (not reading from a file). Firebug did not complain. Looks like the file itself could be the issue, maybe a hidden character is creeping in.

Upvotes: 0

Related Questions