说明：Extjs3.x以后，GridPanel添加了groupclick等方法。

本例实现了给Extjs2.x的GridPanel添加groupclick等方法的解决方案。

思路：

   1. 为自定义的gridpanel对象添加自定义事件，例如：groupclick。

   2. 重写GroupingView的鼠标处理事件（renderUI），对分组的header的鼠标事件进行拦截。

   3. 为自定义的gridpanel对象添加groupclick事件的具体方法。

主要代码如下：

1.重写部分：


Ext.override(Ext.grid.GroupingView, {

   renderUI: function () {

       Ext.grid.GroupingView.superclass.renderUI.call(this);

this.grid.processEvent = this.grid.processEvent.createInterceptor(this.processEvent, this);

       this.mainBody.on('mousedown', this.interceptMouse, this);

       if (this.enableGroupingMenu && this.hmenu) {

           this.hmenu.add('-', {

               itemId: 'groupBy',

               text: this.groupByText,

               handler: this.onGroupByClick,

               scope: this,

               iconCls: 'x-group-by-icon'

           });

           if (this.enableNoGroups) {

               this.hmenu.add({

                   itemId: 'showGroups',

                   text: this.showGroupsText,

                   checked: true,

                   checkHandler: this.onShowGroupsClick,

                   scope: this

               });

           }

           this.hmenu.on('beforeshow', this.beforeMenuShow, this);

       }

   },


   //  private

processEvent: function (name, e) {

       var hd = e.getTarget('.x-grid-group-hd', this.mainBody);

       if (hd) {

           var groupField = this.getGroupField();

           var idPrefix = this.grid.getGridEl().id + '-gp-' + groupField + '-';

           var groupValue = hd.id.substring(idPrefix.length);

           var groupValue = groupValue.substring(0, groupValue.lastIndexOf('-'));

           if (groupValue) {

this.grid.fireEvent('group' + name, this.grid, groupField, groupValue, e);

           }

       }

   }

});

2.gridpanel部分：


   this.addEvents({//加入自定义事件

       "groupclick": true

   });

   this.on('groupclick', function (grid, groupField, groupValue, e) {

       // do something...

   });