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

Assuming you’re running ExtJS 4 define your store like this:

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