Ext3中grouped grid定制化( 取消展开关闭 header可点击选中)

? ? ?在项目中，grouped grid被我们采纳作为一种数据的展现方式。但是，由于它是可展开，关闭的，而且它的每一个group的header都是些简单信息的展示，不能够被选中。因此，它不能很好的满足我们的需求。

? ? ?1.取消展开/关闭的加号与减号

? ? ?2.让header变的可选中

上述两点是，我们对gruoped grid中做的主要提升。

?首先，我们复写了grouping View中的方法，使得它的可展开/关闭可配置（非原创，来自网络）：

?Ext.override(Ext.grid.GroupingView, {

disableGroupingByClick : false,processEvent : function(name, e) {Ext.grid.GroupingView.superclass.processEvent.call(this, name, e);var hd = e.getTarget('.x-grid-group-hd', this.mainBody);if (hd) {// group value is at the end of the stringvar field = this.getGroupField(), prefix = this.getPrefix(field), groupValue = hd.id.substring(prefix.length), emptyRe = new RegExp('gp-'+ Ext.escapeRe(field) + '--hd');// remove trailing '-hd'groupValue = groupValue.substr(0, groupValue.length - 3);// also need to check for empty groupsif (groupValue || emptyRe.test(hd.id)) {this.grid.fireEvent('group' + name, this.grid, field,groupValue, e);}if (name == 'mousedown' && e.button == 0&& !this.disableGroupingByClick) {this.toggleGroup(hd.parentNode);}}}});

?第二个是去改变header的选中。这个选中，其实就是对点击的元素加css。如果有上一次点击，如果上一次点击是是同一个header，则不变更css；如果上一次点击不是用一个元素，则把上一个元素的选中css删除，并给新选中的元素加上css。

?在这里，由于每个record数据的变化，都有可能导致grouping view的变化，所以，在每次操作后，都必须去重新手工grouping这个store。

_groupStore : function(scope, store) {store.groupBy('legSeq', true);scope._addBackground2Header(scope);

                             // currentChoseGroup means the chosen header elementif (scope.currentChosenGroup) {scope.currentChosenGroup.addClass('header-background-color');}

?_addBackground2Header : function(scope) {

                              // headers means all the group header of the grouping viewvar headers = Ext.query('.x-grid-group-hd');

                              //add onclick event for each header element. if clicked on the former chosen element

                            //nothing happen.if clicked on the new element, chosen css will be removed from the

                           // former selected element. And the chosen css will be applied to the currently selected elementExt.each(headers, function(node) {var element = Ext.get(node);element.dom.onclick = function() {if (scope.currentChosenGroup) {if (element.id !== scope.currentChosenGroup) {scope.currentChosenGroup.removeClass('header-background-color');}}scope.currentChosenGroup = element;element.addClass('header-background-color');};});}

?