Creating a master-details view with two grids

A pair of grids is a very typical combination for displaying master-detail relationships. Here's an example using actors' and movies' information. When an actress is selected in the Actors grid, her movies will be shown by the Movies grid like this:

How to do it...

1. 1. Create a data store for the actors grid:

   var actorsStore = new Ext.data.JsonStore({
   url: 'grid-master-details.php',
   root: 'actors',
   baseParams: { action: 'actors' },
   fields: ['actor_id', 'first_name', 'last_name']
   });
   

2. 2. Create a data store for the movies grid:

   var moviesStore = new Ext.data.JsonStore({
   url: 'grid-master-details.php',
   root: 'movies',
   totalProperty: 'count',
   baseParams: { action: 'movies' },
   fields: ['film_id', 'title', 'rating',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float'}]
   });
   

3. 3. Define the actors grid:

   Ext.onReady(function() {
   var actorsGrid = new Ext.grid.GridPanel({
   title: 'Actors',
   renderTo: 'actors-div',
   store: actorsStore,
   sm: new Ext.grid...