Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Defining Grouped Grids

Page of 168

A grouped gridGrouped grids organize a set of records by a common value as illustrated by the figure.

In order to define a grouped grid, you must complete the following tasks:

  • Sort the data in the Store that is bound to the grid.
  • Specify a groupField property or groupers object for the Store that is bound to the grid.
  • Bind an instance of the Ext.grid.feature.Grouping class, or one of its subclasses to the grid instance.

Configuring a Store for Grouping

Before you can group data into a grid you must sort and group data into the Ext.data.Store that is bound to the grid as illustrated by the following code snippet:

Ext.define('SpendingPortal.store.Earmarks', {
    extend: 'Ext.data.Store',

    requires: [
        'SpendingPortal.model.Earmark'
    ],
	 model: 'SpendingPortal.model.Earmark',
    remoteFilter: true,
    remoteSort: true,
    
    // next two lines necessary for initial grouping
    groupField: 'SPONSORNAME',
    sorters:[{property: 'SPONSORNAME',  direction: 'ASC'}]
});

Implementing the Grid Grouping Feature

Disabling grouping on a selected field

The Ext.grid.feature.Grouping class displays rows in your grid that have been aggregated under a common value contained within the Ext.data.Store.groupers specified on the Store.

As illustrated by the figure, users can expand/collapse the groups, as well as specify other columns in the grid to group by. You can disable grouping by adding the groupable:false attribute to a grid column definition.

There are two grid feature plugins that you can deploy for grouping:

Grid Feature Description
Ext.grid.feature.Grouping
(ftype: grouping)
Enables basic grouping
Ext.grid.feature.GroupingSummary
(ftype: groupingsummary)
Adds an aggregate summary row to the bottom of each group.

The following code snippet illustrates defining a grid instance with basic grouping and custom group headers:

{
 xtype: 'gridpanel',
 frameHeader: false,
 columnLines: true,
 store: 'Earmarks',
 features: [
  {
   ftype: 'grouping',
   groupHeaderTpl: [
     '{columnName}: {name} ({[values.children.length]})'
   ],
   hideGroupedHeader: true,
   startCollapsed: false
  }
 ],
 columns: [
  {
   xtype: 'numbercolumn',
   width: 50,
   dataIndex: 'ENACTED_YEAR',
   text: 'Year',
   format: '0000'
  },
  {
   xtype: 'gridcolumn', dataIndex: 'SPONSORNAME', flex: 1,
   text: 'Sponsor'
  }
  {
   xtype: 'templatecolumn',
   tpl:'{[Ext.util.Format.usMoney(values.AMT_CONF * 1000)]}',
   width: 100,
   align: 'right',
   dataIndex: 'AMT_CONF',
   groupable: false,
   text: 'Amt'
  }
 ]
}

Note the following:

  • Grouping on the grid was enabled through the grid's features property.
  • The hideGroupedHeader: true property hides the column that defines the basis of the group.
  • You can control the output of the group name rendering by adding a groupHeaderTpl property to the grouping grid feature definition.
  • Grouping on the numeric field (AMT_CONF) was disabled by inserting a groupable: false attribute.
Page of 168
comments powered by Disqus