ExtJS 3.3 GroupingStore GroupingView 一点点扩展_extjs groupingsummary-优快云博客

本文介绍如何在ExtJS中优化GridPanel分组显示，包括隐藏分组header及实现GroupingStore的组数和组值获取功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是想要不显示分组header的分组GridPanel, 试过一位阿三哥的插件, 但效果不太理想, summary栏在最下, 并不是紧跟着数据, 而且不随水平滚动条滚动, 地址如下:

http://www.rahulsingla.com/blog/2010/04/ext-net-extjs-gridpanel-columns-summary-plugin-(without-grouping)

后来转变思路, 只要隐藏分组的header就行了, 不过GroupingStore在重新加载了数据之后, 需要再调用一次, 因此在load事件里调用,

后来发现写在GroupingView的refresh事件里面才是最合适的, 因为点列标题排序的话不会触发GroupingStore的load事件

Ext.override(Ext.grid.GroupingView, {
   setGroupHeaderVisible: function(visible, grid, headerClass){
    	if(headerClass == undefined || headerClass == "" || headerClass == null){
    		headerClass = "x-grid-group-hd";
    	}
    	var headerDiv;
    	if(grid){
    		headerDiv = Ext.query("div." + headerClass, grid);
    	}else{
    		headerDiv = Ext.query("div." + headerClass);
    	}
    	Ext.each(headerDiv, function(domElement, index, allItems){
    		Ext.get(domElement).setVisibilityMode(Ext.Element.DISPLAY).setVisible(visible);
    	});
   }
});

之后是发现GroupingStore和GroupingView里面貌似没有提供按groupField分组后的组数, 和值数组, 于是根据分组后, groupField的值是排序的规律, 写了2个简单的方法

Ext.override(Ext.data.GroupingStore, {
	/* 给GroupingStore添加获取当前分组组数的功能*/
   getGroupCount: function(){
   	var groupCount = 0;
    	var groupFieldValueBuffer = undefined;
    	var groupField = this.groupField;
    	for(var i = 0; i < this.getCount(); i ++){
    		//如果当前Record里没有groupField对应的值, 会取fields类型的默认值
    		var currentGroupFieldValue = this.getAt(i).get(groupField);
    		if(groupFieldValueBuffer == undefined){
    			groupFieldValueBuffer = currentGroupFieldValue;
    			groupCount ++;
    		}else if(groupFieldValueBuffer != currentGroupFieldValue){
    			groupCount ++;
    		}
    	}
    	return groupCount;
   }, 
   getGroupFieldValues: function(){
   	var groupCount = 0;
   	var groupFieldValues = new Array();
    	var groupFieldValueBuffer = undefined;
    	var groupField = this.groupField;
    	for(var i = 0; i < this.getCount(); i ++){
    		var currentGroupFieldValue = this.getAt(i).get(groupField);
    		if(groupFieldValueBuffer == undefined){
    			groupFieldValueBuffer = currentGroupFieldValue;
    			groupFieldValues[groupCount] = currentGroupFieldValue;
    			groupCount ++;
    		}else if(groupFieldValueBuffer != currentGroupFieldValue){
    			groupFieldValues[groupCount] = currentGroupFieldValue;
    			groupCount ++;
    		}
    	}
    	return groupFieldValues;
   }
});