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 string
			var 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 groups
			if (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 element
				if (scope.currentChosenGroup) {
					scope.currentChosenGroup
							.addClass('header-background-color');
				}

                              // headers means all the group header of the grouping view
				var 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 element
				Ext.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');
					};

				});
			}