2012/01/20

[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

沒有留言:

台灣好行:後慈湖、大溪老街半日遊

要搭台灣好行 慈湖線 (票價100)的朋友,可以在【中壢火車前站】出口,往左邊直走5分鐘到【桃園客運總站】搭乘。搭車到最後一站【慈湖】後可以看到導覽服務站。後慈湖算是管制區,需要先 上網申請 才可以進入,如果是搭台灣好行的話,可以直接在服務站登記候補。假日通常都是人滿為患,建議如...