ExtJS grids with Grouping GridView

Grid data can also be grouped based on data present for a column. Consider the employee grid, there may be many employees who are in the same age group. It is possible to list down employee details grouped by “Age”.

Here’s what we will build in this post,

NOTE: Grouping GridView is achieved straight out of the box. There is no extra js/css to include here.

The modified grid,

var grid = new Ext.grid.GridPanel({

        store: empStore,

        columns: [

                        {header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

                        {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

                        {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                        {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                        {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'},

                        {header: 'Address', width: 250, dataIndex: 'address'}

        ],

        view: new Ext.grid.GroupingView({

                        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

        }),

        stripeRows: true,

        height: 350,

        width: 650,

        title: 'Employee Details',

        renderTo: Ext.getBody()

       });

The field mapping is provided in the reader defined below,

               

var empReader = new Ext.data.JsonReader({}, [

                                   {name: 'last_name'},

                                   {name: 'first_name'},

                                   {name: 'emp_no'},

                                   {name: 'age', type: 'int'},

                                   {name: 'doj', type: 'date', dateFormat: 'm/d/Y'},

                                   {name: 'address'}

                ]);

The store needs to be redefined as,

var empStore = new Ext.data.GroupingStore({

reader: empReader,

data: empData,

sortInfo:{field: 'emp_no', direction: "ASC"},

groupField:'age'

       });

That’s it we are done with our grid with the ability to group rows based on a decided column.

Here’s the JSFiddle -> ExtJS Grouping GridView

NOTE:

1. It is also possible to sort data (by clicking on the column header) after they are grouped.
2. You can also group data based on another column other than "age". Invoke the header menu on any column and notice the option "Group by this field".