Creating data previews

A useful feature of the Ext JS GridPanel is the ability to add a row body that expands beneath the data row. This body can be used to display additional information for each record.

The Movies grid in this recipe uses a record's row body to display the actors that star in each movie. A toolbar button allows the user to toggle the visibility of the actors' row:

How to do it...

1. 1. Define the data store:

   var store = new Ext.data.JsonStore({
   url: 'grid-row-body.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. Define the data grid:

   Ext.onReady(function() {
   var grid = new Ext.grid.GridPanel({
   title: 'Movies',
   store: store,
   columns: [
   { header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
   { id: 'title-col',
   header: "Title",
   width: 180,
   dataIndex: 'title',...