Creating a master-details view with a grid and a panel

A master-detail interface can be built using a grid and a panel component. In this recipe, the movie details are displayed on the basis of the current record selection in the master object—the movies list.

Getting ready...

The sample data used in this chapter's recipes comes from the Sakila sample database.

Note

You can obtain the Sakila database, as well as the installation instructions, at http://dev.mysql.com/doc.

How to do it...

1. 1. Create the data store:

   var store = new Ext.data.JsonStore({
   url: 'grid-data-binding.php',
   root: 'movies',
   idProperty: 'id',
   totalProperty: 'count',
   fields: ['id', 'title', 'category', 'rating', 'actors',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float' }, 'description'],
   remoteSort: true
   });
   store.setDefaultSort('title', 'asc');
   

2. 2. Define the data grid:

   var grid = new Ext.grid.GridPanel({
   store: store,
   height: 300,
   split: true,
   region: 'north',
   columns: [{ header: "ID", width: 30, dataIndex...