EXTJS in XPages #13: Totaling your columns with a groupingSummary

In this article I will highlight a feature of the grouping capability – the “summary grouping”. This feature can be easily used to provide column totals on your grouped grid. We are also going to look at collapsing and expanding all the groups easily and further enhancing your grid features.

EXTJS in XPages series

Here are links to all of the previous articles in this series

• EXTJS in XPages #12 – Counting categories with Grouped columns
• EXTJS in XPages #11 – Grids with Locked Column(s)
• EXTJS in XPages #10 – Grid Row Expander plugin
• EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
• EXTJS in XPages #8 – Selecting data from the grid and opening a document
• EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent in the grid
• EXTJS in XPages #6 – remote sorting using the REST service
• EXTJS in XPages #5 – Infinite scroller
  
• EXTJS in XPages #4 – Adding a Pager
• EXTJS in XPages #3 – Creating a basic grid from a Custom Control
• EXTJS in XPages #2 – Basic Grid capabilities
• EXTJS in XPages #1 – Starting from scratch (the first grid)

Demonstration

The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xGridGroupedSummary.xsp

Download

The sample database that will accompany this series is  available from the menu in the live demo database from this link - http://demo.xomino.com/xomino/Extjs.nsf

Introduction
As we saw in the previous article, adding “grouping” to a grid is relatively simple and with only a couple of changes we are also able to provide column totals. The example below shows the “sum” of the column for each group with a customizable label.

How does it work?

We are going to change two things from our grouping example. We are first going to change the Grouping feature to a GroupingSummary Feature. Other than that it is pretty much the same as before – I have added a couple of other optional parameters at the end so that the user cannot group the view by other columns.

	var groupingFeature = Ext.create('Ext.grid.feature.GroupingSummary',{
		id: 'group',
		ftype: 'groupingsummary',
		groupHeaderTpl: [
		  '{name:this.formatName} ({rows.length})', //Display "None" if there is a blank category
		  {
			  formatName: function(name) {
			  var sName = (name == "") ? "None ": name;
			  return sName;
		  }
        }],
        hideGroupedHeader: true,
        enableGroupingMenu: false,
        startCollapsed: false
	});

The second thing to change is adding parameters to the columns to show what kind of summary we want and what format we want it in.

In this case I have added the CVV2 column to the previous grid (cos it has numbers in it) and here is the column.

{
	text: 'C V V 2',
	width: 120,
	sortable: true,
	dataIndex: 'cvv2',
	field: {
		xtype: 'numberfield'
	},
	summaryType: 'sum',
	summaryRenderer: function(value, summaryData, dataIndex) {
		return value + ' widgets';
	},
	filterable: true
}

We have added the summaryType and summaryRenderer parameters to the columns object and as you can see it is fairly self explanatory what each option does. The summaryType field can be one of 5 options:

• count
• sum
• min
• max
• average

The example below shows the “average” of the column for each group.

The summaryRenderer allows me to insert ” widgets” onto the end of the summary – but it could be hours, minutes years or any other label. You could even insert an icon or color the value based on status should you so chose.

Expand and Collapse
This code is equally applicable to the grouping feature in the last article. It is a simple peice of code which gets a handle on the feature (grouping or groupingSummary) and uses the 4.1 methods collapseAll() and expandAll() to do just that. The code below shows the updated gridDock object. Within that a “-” is a separator for the buttons.

var gridFunc = gridFunc || {}
gridFunc = {
	grid: function(){
	  return Ext.getCmp('myPanel')
	}
}

gridDock = [{
	id: 'activeStorePaging',
     xtype: 'toolbar',
     dock: 'bottom',
	 items: [
	   {
	       text: 'Clear Filter Data',
	       handler: function () {
	           grid.filters.clearFilters();
	       }
	   }
    ]
 },
'-',
   {
       text: 'Expand All',
       handler: function () {
           gridFunc.grid().features[0].expandAll();
       }
   },
'-',
  {
       text: 'Collapse All',
       handler: function () {
           gridFunc.grid().features[0].collapseAll();
       }
}]

In this example the gridFunc.grid() call is my way of getting a handle on the grid as discussed in this article. features[0] is the groupingFeature and that is it

Conclusion

The groupingSummary allows for a very simple and once again effective way of displaying data to your users using the EXTJS grid library.