Clear Up
SharpKit Reference

GroupingSummary Class

This feature adds an aggregate summary row at the bottom of each group that is provided by the Ext.grid.feature.Grouping feature. There are two aspects to the summary:


The summary value needs to be calculated for each column in the grid. This is controlled by the summaryType option specified on the column. There are several built in summary types, which can be specified as a string on the column configuration. These call underlying methods on the store:

  • count
  • sum
  • min
  • max
  • average

Alternatively, the summaryType can be a function definition. If this is the case, the function is called with an array of records to calculate the summary value.


Similar to a column, the summary also supports a summaryRenderer function. This summaryRenderer is called before displaying a value. The function is optional, if not specified the default calculated value is shown. The summaryRenderer is called with:

  • value {Object} - The calculated value.
  • summaryData {Object} - Contains all raw summary values for the row.
  • field {String} - The name of the field we are calculating

Example Usage

    Ext.define('TestResult', {
            extend: '',
            fields: ['student', 'subject', {
            name: 'mark',
            type: 'int'
            Ext.create('Ext.grid.Panel', {
            width: 200,
            height: 240,
            renderTo: document.body,
            features: [{
            groupHeaderTpl: 'Subject: {name}',
            ftype: 'groupingsummary'
            store: {
            model: 'TestResult',
            groupField: 'subject',
            data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
            student: 'Student 1',
            subject: 'Science',
            mark: 72
            student: 'Student 2',
            subject: 'Math',
            mark: 96
            student: 'Student 2',
            subject: 'Science',
            mark: 68
            columns: [{
            dataIndex: 'student',
            text: 'Name',
            summaryType: 'count',
            summaryRenderer: function(value){
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
            }, {
            dataIndex: 'mark',
            text: 'Mark',
            summaryType: 'average'

Namespace: Ext.grid.feature


Name Description
getColumnValue(Column, object) Gets the value for the column from the attached data.
getSummary(Store, object, JsString, bool) Get the summary data for a field.
getSummaryFragments() Gets any fragments to be used in the tpl
printSummaryRow(object) Prints a summary row
toggleSummaryRow(bool) Toggle whether or not to show the summary row.


Name Description
remoteRoot The name of the property which contains the Array of summary objects. It allows to use server-side calculated summaries.
showSummaryRow True to show the summary row. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.