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

Another common master-detail UI uses a grid to present a master list and form elements to present the details of the selected record on the grid.

In this recipe, a FormPanel displays the details of movies as they are selected on the grid:

How to do it...

1. 1. Define the data store for the movies list:

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

2. 2. Create the movies grid panel:

   var moviesGrid = new Ext.grid.GridPanel({
   store: moviesStore,
   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",
   dataIndex: 'rating',
   sortable: true
   },
   { header: "Length",
   dataIndex...