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

Enhancing Grouped Grids

Page of 168
Disabling grouping on a selected field

Defining a Custom Group Header

As illustrated by the following code snippet, you can control the output of the group name rendering by adding a groupHeaderTpl property to the grouping grid feature definition as illustrated by line 9 of the following code sample.

The following variables are available for use within the groupHeaderTpl template:

Variable Description
groupField The name of the field that you are grouping by.
columnName The column header associated with the field being used for grouping.
groupValue The value specified for the groupField expression.
renderedGroupValue The rendered value of the groupField for the group header being rendered, as produced by the column renderer.
name Same as renderedGroupValue.
children An array containing the child records for the group being rendered.
{
 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'
  }
 ]
}

Defining Group Summary Rows

The Ext.grid.feature.GroupingSummary (ftype: groupingsummary) class adds a calculated summary row to the bottom of each group. Calculations can be made either on the client or can be transmitted to Ext JS from your application server as part of your proxy request.

A calculated group summary

Client-side summaries are calculated by specifying a summaryType attribute on a grid column. The following values are supported for summaryType. Note that you can also specify a custom method that receives an array of models that are members of the same group.

  • sum
  • min
  • max
  • count
  • average

Format the output from the resulting calculation by defining a summaryRenderer method for the grid column as illustrated by line 34 of the following code snippet

{
 xtype: 'gridpanel',
 columnLines: true,
 store: 'Earmarks',
 features: [
  {
   ftype: 'groupingsummary',
   groupHeaderTpl: [
     '{columnName}: {name} ({[values.rows.length]} items)'
   ],
   hideGroupedHeader: true
  }
 ]
 columns: [
  {
   xtype: 'numbercolumn',
   width: 50,
   dataIndex: 'ENACTED_YEAR',
   text: 'Year',
   format: '0000'
  },
  {
   xtype: 'gridcolumn',
   dataIndex: 'SPONSORNAME',
   flex: 1,
   text: 'Sponsor'
  },
  {
   xtype: 'templatecolumn',
   dataIndex: 'AMT_CONF',
   groupable: false,
   text: 'Amt'
   summaryType: 'sum',
   summaryRenderer: function(val, params, data) {
    return Ext.String.format(
             "Total: {0}M",
	         Ext.Number.toFixed(val / 1000,2) + "M"
     );
   },
   tpl: [
     '{[Ext.util.Format.usMoney(values.AMT_CONF * 1000)]}'
   ],
   width: 100,
   align: 'right'
  }]
}
Page of 168
comments powered by Disqus