Clear Up
SharpKit Reference

Ext.grid.feature Namespace

Download SDK: SharpKit.ExtJs.zip

Interfaces

Name Description
AbstractSummary

A small abstract class that contains the shared behaviour for any summary calculations to be used in the grid.

Classes

Name Description
AbstractSummaryConfig
AbstractSummaryEvents
Chunking
ChunkingConfig
ChunkingEvents
Feature

A feature is a type of plugin that is specific to the Ext.grid.Panel. It provides several hooks that allows the developer to inject additional functionality at certain points throughout the grid creation cycle. This class provides the base template methods that are available to the developer, it should be extended.

There are several built in features that extend this class, for example:

  • Ext.grid.feature.Grouping - Shows grid rows in groups as specified by the Ext.data.Store
  • Ext.grid.feature.RowBody - Adds a body section for each grid row that can contain markup.
  • Ext.grid.feature.Summary - Adds a summary row at the bottom of the grid with aggregate totals for a column.

Using Features

A feature is added to the grid by specifying it an array of features in the configuration:

  
var groupingFeature = Ext.create('Ext.grid.feature.Grouping');
            Ext.create('Ext.grid.Panel', {
            // other options
            features: [groupingFeature]
            });
            
FeatureConfig
FeatureEvents
Grouping

This feature allows to display the grid rows aggregated into groups as specified by the Ext.data.Store.groupers 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('Ext.data.Store', {
            storeId:'employeeStore',
            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',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            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.

GroupingConfig
GroupingEvents
GroupingSummary

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:

Calculation

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.

Rendering

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: 'Ext.data.Model',
            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'
            }]
            });
            
GroupingSummaryConfig
GroupingSummaryEvents
RowBody

The rowbody feature enhances the grid's markup to have an additional tr -> td -> div which spans the entire width of the original row.

This is useful to to associate additional information with a particular record in a grid.

Rowbodies are initially hidden unless you override getAdditionalData.

Will expose additional events on the gridview with the prefix of 'rowbody'. For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.

Example

  
    Ext.define('Animal', {
            extend: 'Ext.data.Model',
            fields: ['name', 'latin', 'desc']
            });
            Ext.create('Ext.grid.Panel', {
            width: 400,
            height: 300,
            renderTo: Ext.getBody(),
            store: {
            model: 'Animal',
            data: [
            {name: 'Tiger', latin: 'Panthera tigris',
            desc: 'The largest cat species, weighing up to 306 kg (670 lb).'},
            {name: 'Roman snail', latin: 'Helix pomatia',
            desc: 'A species of large, edible, air-breathing land snail.'},
            {name: 'Yellow-winged darter', latin: 'Sympetrum flaveolum',
            desc: 'A dragonfly found in Europe and mid and Northern China.'},
            {name: 'Superb Fairy-wren', latin: 'Malurus cyaneus',
            desc: 'Common and familiar across south-eastern Australia.'}
            ]
            },
            columns: [{
            dataIndex: 'name',
            text: 'Common name',
            width: 125
            }, {
            dataIndex: 'latin',
            text: 'Scientific name',
            flex: 1
            }],
            features: [{
            ftype: 'rowbody',
            getAdditionalData: function(data, rowIndex, record, orig) {
            var headerCt = this.view.headerCt,
            colspan = headerCt.getColumnCount();
            // Usually you would style the my-body-class in CSS file
            return {
            rowBody: '<div style="padding: 1em">'+record.get("desc")+'</div>',
            rowBodyCls: "my-body-class",
            rowBodyColspan: colspan
            };
            }
            }]
            });
            
RowBodyConfig
RowBodyEvents
RowWrap

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

RowWrapConfig
RowWrapEvents
Summary

This feature is used to place a summary row at the bottom of the grid. If using a grouping, see Ext.grid.feature.GroupingSummary. There are 2 aspects to calculating the summaries, calculation and rendering.

Calculation

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.

Rendering

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: 'Ext.data.Model',
            fields: ['student', {
            name: 'mark',
            type: 'int'
            }]
            });
            Ext.create('Ext.grid.Panel', {
            width: 200,
            height: 140,
            renderTo: document.body,
            features: [{
            ftype: 'summary'
            }],
            store: {
            model: 'TestResult',
            data: [{
            student: 'Student 1',
            mark: 84
            },{
            student: 'Student 2',
            mark: 72
            },{
            student: 'Student 3',
            mark: 96
            },{
            student: 'Student 4',
            mark: 68
            }]
            },
            columns: [{
            dataIndex: 'student',
            text: 'Name',
            summaryType: 'count',
            summaryRenderer: function(value, summaryData, dataIndex) {
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
            }
            }, {
            dataIndex: 'mark',
            text: 'Mark',
            summaryType: 'average'
            }]
            });
            
SummaryConfig
SummaryEvents
© Copyright 2005-2011 SharpKit. All rights reserved.