extJS grid error, JSON data is not being displayed

Question

I've configured my store as:

var store = new Ext.data.JsonStore({
url: 'gridData.php',
root: 'movies',
fields: ['film_id', 'title', 'release_year', 'rating']
});

and then defined my grid as:

var grid = new Ext.grid.GridPanel({
    title:'Movies',
    store: store,
    columns: [
                { header: "ID", width: 30, dataIndex: 'film_id',sortable: true, hidden:true },
                { id: 'title-col', header: "Title", width: 180,dataIndex: 'title', sortable: true },
                { header: "Rating", width: 75, dataIndex: 'rating',sortable: true },
                { header: "Year", width: 75, dataIndex: 'release_year',sortable: true, align: 'center' }
        ],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    loadMask: true
});

then I load the store:

store.load();

I'm doing all this in Ext.onReady method. The data that I want to display is fetched from a php file which is of the following form:

{ "count":2, "movies":[{ "film_id":"1", "title":"ACADEMY DINOSAUR", "description":"An Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies", "release_year":"2006", "rating":"PG", "special_features":"Deleted Scenes,Behind the Scenes" }, { "film_id":"2", "title":"ACE GOLDFINGER", "description":"An Astounding Epistle of a Database Administrator And an Explorer who must Find a Car in Ancient China", "release_year":"2006", "rating":"G", "special_features":"Trailers,Deleted Scenes" } ] }

When the page is loaded, the grid keeps showing the loading mask and the data is never shown. Also, I get the error a is undefined. What am I missing?

Edit

I've found that there's some path issue when assigning URL to store but still can't resolve. My "gridData.php" file, JS file and the HTML file where the grid is being displayed, are in the same folder and I'm on "localhost/myapp". Please help!

Answer 1

Your store declares itself to have these fields:

• id
• title
• release_year
• rating

However, your JSON data's rows contain these fields:

• film_id
• title
• description
• release_year
• rating
• special_features

Your error is likely caused by the grid looking for an 'id' field that does not exist in the data.

One option is to change your store's field definition to:

['film_id', 'title', 'release_year', 'rating']

You would also need to make a corresponding alteration to the column definition:

{header: "ID", width: 30, dataIndex: 'film_id', sortable: true, hidden: true}

Another option is to add a mapping to the field's definition in the store:

[{name: 'id', mapping: 'film_id'}, 'title', 'release_year', 'rating']

---

Also, I suggest that while developing you include ExtJS into your page using 'ext-all-debug.js' instead of 'ext-all.js'. The error messages and backtraces in the console will usually be much more descriptive when running against the debug build.