说明:Extjs2.x的GridPanel没有groupclick这个方法。
为了实现在Group的Header中添加checkbox框,实现整组选中的效果,本例重写了GroupingView的interceptMouse方法。
效果如下图:
代码如下:
1.自定义的GridPanel对象的部分内容:
this._view = new Ext.grid.GroupingView({
forceFit: true,
scrollOffset: 0,
startCollapsed: true,
enableGroupingMenu: false,
hideGroupedColumn: true,
emptyText: '没有满足条件的项目',
groupTextTpl: '<span style="font-size:12px"><input class="grpCheckbox x-grid3-cell-inner x-grid3-col-checker" style="vertical-align:middle;" type="checkbox"/>{text}, ({[values.rs.length]} {[ "个学院申购条目"]})</span>'
});
2.重写的GroupingView
// 在分组的header中添加checkbox,实现整组条目的选中
Ext.override(Ext.grid.GroupingView, {
interceptMouse: function (e) {
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if (hd) {
var t = e.getTarget('.grpCheckbox');
if (t) {
var checked = t.checked;
var groupField = this.getGroupField(); // 得到groupField
var idPrefix = this.grid.getGridEl().id + '-gp-' + groupField + '-';
var groupValue = hd.id.substring(idPrefix.length);
var groupValue = groupValue.substring(0, groupValue.lastIndexOf('-')); // 得到groupValue
var grid = this.grid;
grid.getStore().each(function (rec, index) {
var recordValue = rec.get(groupField);
if (recordValue == groupValue) {
if (checked) {
grid.getSelectionModel().deselectRow(index);
} else {
grid.getSelectionModel().selectRow(index, true);
}
}
});
} else {
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
}
}
});
转载于:https://blog.51cto.com/wangyuelucky/1179920