View Full Version : Enable/disable GroupingSummary on the fly

16 Jul 2013, 6:10 AM
I've got a grid like this:

var grid = new Ext.grid.GridPanel({
store: Ext.data.StoreManager.lookup('oppsStore'),
loadMask: true,
renderTo: Ext.getBody(),
features: [{
id: 'groupConfig',
ftype: 'groupingsummary',


How can I enable/disable the GroupingSummary? Ext.grid.feature.GroupingSummary has the methods enable() and disable(), but how can I use it?

17 Jul 2013, 10:04 PM
You can get a reference to the feature by configuring the feature with an id using getFeature() from the grid's view. From there you can enable / disable the feature:

Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'

var grid = Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary',
id: 'groupingsummary'
tbar: [{
text: 'Disable Grouping Summary',
enableToggle: true,
toggleHandler: function (btn, pressed) {
var summary = grid.getView().getFeature('groupingsummary');
pressed ? summary.disable() : summary.enable();
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'

19 Jul 2013, 1:11 PM
With EXTJS 4.2, I tried disabling the grouping feature on the grid using below code when we trigger a button, but it never worked, I can still see the 'Group by this field' as enabled in the column menu:


29 Jul 2014, 5:28 AM
@slemmon : I have tried this code as you stated above, but I get an error while trying to disable the grouping of grid

Uncaught TypeError: Cannot read property 'ownerCt' of null Grouping.js?_dc=1406635015061:907
Ext.define.onGroupChange Grouping.js?_dc=1406635015061:907
Ext.define.doFire Controller.js?_dc=1406635015061:244
Ext.define.fire Controller.js?_dc=1406635015061:122
Ext.define.doDispatchEvent Dispatcher.js?_dc=1406635015061:482
Ext.define.dispatchEvent Dispatcher.js?_dc=1406635015061:462
Ext.define.doFireEvent Observable.js?_dc=1406635015061:429
prototype.doFireEvent EventDomain.js?_dc=1406635015061:271
Ext.define.fireEvent Observable.js?_dc=1406635015061:367
Ext.define.group AbstractStore.js?_dc=1406635015061:932
Ext.define.clearGrouping AbstractStore.js?_dc=1406635015061:940

I can't figure out a way on how to resolve this error. Since my operation gets stuck because of this. Please help me out.