This recipe explains how to populate the Movies grid with JSON data retrieved from the server. The loaded grid will look as shown in the following screenshot:
var store = new Ext.data.JsonStore({ url: 'grid-json-remote.php', root: 'movies', fields: ['id', 'title', 'release_year', 'rating'] });
2. Define the grid panel:
Ext.onReady(function() { var grid = new Ext.grid.GridPanel({ title:'Movies', store: store, columns: [ { header: "ID", width: 30, dataIndex: '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 }); store.load(); });