[ExtJS] Grid Grouping Expand all, Collapse all group

The ExtJS 4 does not suppport the grouping grid expanding/collapsing all groups. In this tutorial, we will show how to enable the grouping ability and add two buttons in grid to trigger the expanding/collapsing events.

When building an ExtJS application, it is not necessary to adopt ExtJS MVC Architecture. However, in the following code, ExtJS MVC is assumed to be used.

Ext.define('Foo.Application', {
  extend: 'Ext.app.Application',
  name: 'Foo',
  appFolder: 'app/foo',
  controllers: ['User'],
  launch: function () {
    Ext.override(Ext.grid.feature.Grouping, {
      collapseAll: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.collapse(Ext.get(group.id));
        });
      },
      expandAll: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.expand(Ext.get(group.id));
        });
      },
      collapseAllButTop: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.collapse(Ext.get(group.id));
        });
        if(groups.length & gt; 0) {
          this.expand(Ext.get(groups[0].id));
        }
      }
    });
  }
});

Ext.define('Foo.model.User', {
  extend: 'Ext.data.Model,
  model: 'User',
  fields: ['name ', 'email']
});

Ext.define('Foo.store.User ', {
   extend: 'Ext.data.Store',
   model: 'User',
   groupField: 'name'
});

Ext.define('Foo.grid.User', {
   extend: 'Ext.grid.Panel',
   alias: 'widget.user',
   features: [{
      ftype: 'grouping',
      groupHeaderTpl: : 'user name: {name}',
      startCollapsed: true,
      id: 'groupingFeature'
   }],
   columnLines: true,
   autoScroll: true,
   store: 'User',
   columns: [{
   header: 'Name',
      dataIndex: 'name',
   }, {
      header: 'E-Mail',
      dataIndex: 'email',
   }],
   initComponent: function () {
      var me = this;
      me.tbar = [{
         text: 'expand all ',
         handler: function () {
            me.getView().getFeature('groupingFeature').expandAll();
         }
      }, {
         text: 'collapse all ',
         handler: function () {
           me.getView().getFeature('groupingFeature').collapseAll();
         }
      }];
      me.callParent();
   }
});

Reference

Ext Grid Grouping summary collapse all