Clear Up
SharpKit Reference

Grouping Class

This feature allows to display the grid rows aggregated into groups as specified by the specified on the Store. The group will show the title for the group name and then the appropriate records for the group underneath. The groups can also be expanded and collapsed.

Extra Events

This feature adds several extra events that will be fired on the grid to interact with the groups:

  • groupclick
  • groupdblclick
  • groupcontextmenu
  • groupexpand
  • groupcollapse

Menu Augmentation

This feature adds extra options to the grid column menu to provide the user with functionality to modify the grouping. This can be disabled by setting the enableGroupingMenu option. The option to disallow grouping from being turned off by the user is enableNoGroups.

Controlling Group Text

The groupHeaderTpl is used to control the rendered title for each group. It can modified to customized the default display.

Example Usage

var store = Ext.create('', {
            fields:['name', 'seniority', 'department'],
            groupField: 'department',
            data: {'employees':[
            { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
            { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
            { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
            { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
            { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
            proxy: {
            type: 'memory',
            reader: {
            type: 'json',
            root: 'employees'
            Ext.create('Ext.grid.Panel', {
            title: 'Employees',
            columns: [
            { text: 'Name',     dataIndex: 'name' },
            { text: 'Seniority', dataIndex: 'seniority' }
            features: [{ftype:'grouping'}],
            width: 200,
            height: 275,
            renderTo: Ext.getBody()

Note: To use grouping with a grid that has locked columns, you need to supply the grouping feature as a config object - so the grid can create two instances of the grouping feature.

Namespace: Ext.grid.feature

Base Types


Base Interfaces


Name Description
collapse(object, bool) Collapse a group
collapseAll() Collapse all groups
expand(object, bool) Expand a group
expandAll() Expand all groups
isExpanded(JsString) Returns true if the named group is expanded.


Name Description
collapsible Set to falsee to disable collapsing groups from the UI. This is set to false when the associated store is buffered. Defaults to: true
depthToIndent Number of pixels to indent per grouping level Defaults to: 17
enableGroupingMenu True to enable the grouping control in the header menu. Defaults to: true
enableNoGroups True to allow the user to turn off grouping. Defaults to: true
groupByText Text displayed in the grid header menu for grouping by header. Defaults to: "Group by this field"
groupHeaderTpl A string Template snippet, an array of strings (optionally followed by an object containing Template methods) to be used to construct a Template, or a Template instance.
  • Example 1 (Template snippet):

    groupHeaderTpl: 'Group: {name}'
  • Example 2 (Array):

    groupHeaderTpl: [
                'Group: ',
                formatName: function(name) {
                return Ext.String.trim(name);
  • Example 3 (Template Instance):

    groupHeaderTpl: Ext.create('Ext.XTemplate',
                'Group: ',
                formatName: function(name) {
                return Ext.String.trim(name);
  • Defaults to: "{columnName}: {name}"
  • groupField : String

    The field name being grouped by.

  • columnName : String

    The column header associated with the field being grouped by if there is a column for the field, falls back to the groupField name.

  • groupValue : Mixed

    The value of the groupField for the group header being rendered.

  • renderedGroupValue : String

    The rendered value of the groupField for the group header being rendered, as produced by the column renderer.

  • name : String

    An alias for renderedGroupValue

  • rows : Object[]

    An array of child row data objects as returned by the View's prepareData method.

  • children :[]

    An array containing the child records for the group being rendered.

  • hideGroupedHeader True to hide the header that is currently grouped. Defaults to: false
    showGroupsText Text displayed in the grid header for enabling/disabling grouping. Defaults to: "Show in groups"
    startCollapsed True to start all groups collapsed. Defaults to: false
    © Copyright 2005-2011 SharpKit. All rights reserved.