Creating a grid panel with expandable rows

The Movies grid in this recipe uses a plugin that adds an expandable body to each data row. This expandable area is used to display the actors who star in each movie:

How to do it...

1. 1. Create the data store:

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

2. 2. Create the row expander:

   var rowExpander = new Ext.grid.RowExpander({
   tpl: new Ext.Template(
   '<div class="row-preview"><img src="img/star_yellow.png" align="left" style="padding-right:5px;"/> <p>{actors}</p></div>'
   )
   });
   

3. 3. Define the grid panel:

   Ext.onReady(function() {
   var grid = new Ext.grid.GridPanel({
   title: 'Movies',
   store: store,
   columns: [
   rowExpander,
   { header: "ID", width: 30, dataIndex: 'fid', sortable...