While grid allows us to make one or more columns sortable (through the sortable configuration of Ext.grid.ColumnModel class). However, it just performs client side sorting in ascending or descending order. It does not perform sorting with respect to values in some other column. For example if I want to sort on prices of the articles in the same brand then simple grid sorting does not allow you to achieve that grouping. This is where ExtJS provides you GroupingStore, which enables you to view related items together and view them shorted as well!
The Class Ext.data.GroupingStore is similar to normal store, except that it provides few additional configurations:
groupField — The field name by which to sort the store’s data
groupOnSort — True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the existing sort info
The GroupingStore is often used in conjunction with an Ext.grid.GroupingView to provide the data model for a grouped GridPanel. All you need to do is to define following configuration in GridPanel:
view: new Ext.grid.GroupingView()
Ext.grid.GroupingView is extended from Ext.grid.GridView and it allows you to minimize maximize all the items in a group within the grid panel. On top of this, if you add the usual components like tool bar (with your buttons of choices) and paging bar and check boxes and you have such a rich interface. ExtJS you beauty!