Grid GroupingView添加 Checkbox

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

            }

        }

    }

});