Displaying JSON data generated by the server

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:

How to do it...

1. 1. Create a data store:

   var store = new Ext.data.JsonStore({
   url: 'grid-json-remote.php',
   root: 'movies',
   fields: ['id', 'title', 'release_year', 'rating']
   });
   

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

How it works...

As a first step, the data store is created...