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