说明：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...

});