Data grouping with live group summaries

Combining a grid component with a GroupingStore and a GroupingView allows you to display records grouped by one of the available fields, and also allows you to create column summaries on the fly.

The Movies By Category grid in this recipe implements data grouping and live group summaries. Each group shows a summary with the number of movies in the group, the average movie length, and price:

With the Group By This Field menu, users can change the way data is grouped, as well as recalculate the summaries accordingly:

How to do it...

1. 1. Create the data reader:

   var reader = new Ext.data.JsonReader({
   idProperty: 'fid',
   root: 'movies',
   fields: ['id', 'title', 'category', 'rating',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float'}]
   });
   

2. 2. Createa a grouping store:

   var groupingStore = new Ext.data.GroupingStore({
   url: 'grid-group-summary.php',
   reader: reader,
   sortInfo: { field: 'title', direction: "desc" },
   groupField: 'category'
   });
   

3. 3. Define...