Ext GroupingView 生成可分组显示的网格数据

一：首先编写父类分组网格，可扩展，可继承的。名称为：groupView.js

Ext.namespace('Ext.gr.gv');

Ext.gr.gv.ExtGroupViewGrid = Ext.extend(Ext.grid.GridPanel,{
	
	// 表格结构
	structure: null,
	// 获取数据的URL
	url: '',
	//支持actioncolumn特性
	actioncolumn: null,
	// 默认排序字段
	defaultSortField: '',
	defaultSortDir: 'asc',
	// 关键字段
	keyField: null,
	// 预加载数据
	preload: true,
	// 是否需要分页工具栏，默认为true
	needPage: true,
	// 是否显示分页信息
	showPageInfo: true,
	// 每页记录数
	pageSize: 15,
	// 是否显示加载提示
	loadMask: true,
	// 是否显示边框
	frame: false,
	
	viewConfig: {
		forceFit: true
	},
	//
	groupField: '',
	
	//组建初始化
	initComponent: function(){
	     this.initStructure();  // 根据表格结构构造ColumnModel对象和Record对象
	     
	     Ext.gr.gv.ExtGroupViewGrid.superclass.initComponent.call(this);
	},
	
	// 根据表格结构构造ColumnModel对象、Record对象、Store对象等
	initStructure: function(){
	      var oColModel = new Array();
	      var oRecord   = new Array();
	      
	      // 定义Checkbox作为行选择器
	      var sm = new Ext.grid.CheckboxSelectionModel();
	      this.sm = sm;
	      
	      oColModel [0] = sm;
	      
	      
	      // 构造GRID所需对象
	      for(var i=0, len =this.structure.length; i<len ;i++){
	      	//表结构的列定义
	      	var column = this.structure[i];
	      	
	      	// 如果字段为hidden，则不生成columnMode
	      	if(column.hidden == undefined || !column.hidden){
	      		//把元素装载到Mode里面去
	      		oColModel[oColModel.length] = {
	      			header: column.header,
	      			dataIndex: column.name,
	      			width: column.width,
	      			sortable: column.sortable,
	      			renderer: column.renderer,
	      			locked: column.locked
	      		};
	      		
	      		// 装载完后对某些类型进行转换，方便子类继承的时候，column type 直接定义成下面的type就行，自动转换
	      		if(column.renderer != null)
	      		    oColModel[oColModel.length-1].renderer = column.renderer;
	      		else if(column.type == 'boolean')
	      		    oColModel[oColModel.length-1].renderer = 'boolean';
	      		else if(column.type == 'date')
	      		    oColModel[oColModel.length-1].renderer = Ext.util.Format.dateRenderer('Y-m-d');
	      		else if(column.type == 'datetime')
	      		    oColModel[oColModel.length-1].renderer = Ext.util.Format.dateRenderer('Y-m-d H:i:s');
	      		else 
	      		    oColModel[oColModel.length-1].renderer = Ext.grid.ColumnModel.defaultRenderer;
	      	}
	      	// 构造Record对象
	      	oRecord[oRecord.length] = {
	      		name: column.name,
	      		type: (column.type == 'date' || column.type == 'datetime') ? 'date': 'string',
	      		dateFormat: column.type == 'date' ? 'Y-m-d' : 'Y-m-d H:i:s'
	      	};
	      }
	      
	      //增加actioncolumn列
	      if(this.actioncolumn != null){
	      	oColModel [this.structure.length] = this.actioncolumn;
	      } 
	      
	      //构造columnModel
	      this.cm = new Ext.grid.ColumnModel(oColModel);
	      this.oColModel = this.cm;
	      
	      //默认可排序
	      this.cm.defaultStortable = true;
	      
	      var record = Ext.data.Record.create(oRecord);
	      var reader = new Ext.data.JsonReader({
	      	  totalProperty : 'totalCount',
	      	  root: 'result',
	      	  id: this.keyField
	      }, record);
	      
	      //构造store对象
	      this.ds = new Ext.data.GroupingStore({
	           proxy : new Ext.data.HttpProxy({
	           	     url : this.url
	           }),
	           reader: reader,
	           autoLoad:false,//设为false，由后面的代码进行preload控制
	           sortInfo:{
	                field: this.defaultSortField,
	                direction: this.defaultSortDir
	           },
	           groupField: this.groupField //设置默认的分组字段
	      });
	      this.store = this.ds;
	      
	      
	      // 添加分页工具栏  
		  if (this.needPage){
				var pagingToolbar = new Ext.PagingToolbar({
					store: this.ds,
					pageSize: this.pageSize,
					displayInfo: this.showPageInfo,
					displayMsg: '第 {0} - {1} 条记录 /  共 {2} 条记录',
					emptyMsg: '<font color="red">提示：没有任何符合条件的记录！</font>'
				});
				this.bbar = pagingToolbar;
				this.bottomToolbar = this.bbar;
		  }
		
		  // 加载数据列表
		if(this.preload)
			this.store.load({params:{start:0, limit:this.pageSize}});
		
			
	    //分组初始参数设置
		this.view = new Ext.grid.GroupingView({
			forceFit: true,
			showGroupName: false,
			enableNoGroups: false,
			enableGroupingMenu: true,
			hideGroupedColumn: true
		});
	},
	// 改变表格的URL
	changeUrl: function(url){
		this.url = url;
		this.store.proxy.setUrl(url, true);
	},
	
	// 获取表格每页记录数
	getPageSize: function(){
		return this.bottomToolbar.pageSize;
	},
	
	//获取表格中被选择的记录的主键id数组
	getSelKeyIds: function(){
		var sel = this.getSelectionModel().getSelections();
		if(sel.length > 0){
			var ids = new Array();
			for(var i=0; i<sel.length; i++){
				ids.push(sel[i].get(this.keyField));
			}
			return ids	
		}
		return null;
	}
})

二：自定义显示数据的网格，继承 Ext.gr.gv.ExtGroupViewGrid

      

Ext.namespace('Ext.gr.gv');

Ext.gr.gv.PageEleGroupGrid = Ext.extend(Ext.gr.gv.ExtGroupViewGrid,{
	
	border : true,
	groupField: 'bigTypeid',
	
	templateId: null,
	
	initComponent: function(){
		this.tbar = ['-',{
			text: '新增页面元素',
			tooltip: '新增只隶属于当前模板的页面元素',
			iconCls: 'icon-add',
			handler: this.addSpecPageElement,
			scope: this
		},'-',{
			text: '刷新',
		    iconCls: 'refresh',
		    handler: this.onRefresh,
		    scope: this
		},'-'];
		
		var gridStructure = [{
			name: 'dbid',
			hidden: true
		},{
			name: 'bigTypeid',
			header: '大类编号',
			sortable: true
		},{
			name: 'typeName',
			header: '小类名称',
			width: 150,
			sortable: true
		},{
			name: 'des',
			header: '小类描述',
			width: 230,
			sortable: true
		}];
		
		this.structure = gridStructure;
		
		this.defaultSortField = 'dbid';
		this.keyField = 'dbid';
		
		this.deleteMsg = '确认要删除选中的页面元素吗？<br/>';
		this.deleteMsgBoxWidth = 370;
		
		Ext.gr.gv.PageEleGroupGrid.superclass.initComponent.call(this);
	}
});

三 :新建Panel,装载查询form和网格

      

Ext.namespace('Ext.gr.gv');


Ext.gr.gv.groupGirdPanel = Ext.extend(Ext.Panel,{
	
	layout: 'border',
	gridUlr:'',
	formPanel: null,
	grid: null,
	
	templateInfoPanel: null, //模板基本信息面板
	
	changeRelatedTable: false, //是否修改了关联业务表，包括主表或从表的任意改动
	oldMasterTableValue: '',
	oldSlaveTablesValue: '',
	
	// 组件事件初始化
	initComponent: function(){
		Ext.gr.gv.groupGirdPanel.superclass.initComponent.call(this);
		
		var groupFormPanel = new Ext.FormPanel({
			region : 'north',
			//layout: 'column',
			height: 100,
			labelAlign: 'right',
			labelWidth: 65,
			frame: true,
			margins: '1 1 2 1',
			border: true,
			items:[{
				    layout: 'column',
				    items:[{
				    	 columnWidth : .5,
				    	 layout : 'form',
				    	 items:[{
					    	 	xtype: 'textfield',
		       					itemType: 'boolean',
		       					fieldLabel: '模板名称',
							    name: 'moduleName',
							    anchor:'80%'
				    	 }]
				    },{
				    	columnWidth : .5,
				    	 layout : 'form',
				    	 items:[{
					    	 	xtype: 'textfield',
		       					itemType: 'boolean',
		       					fieldLabel: '模板内容',
							    name: 'moduleContent',
							    anchor:'80%'
				    	 }]
				    },
				    {
				         columnWidth : .7,
				    	 layout : 'form',
						 html:' '
					},
					{
				    	columnWidth : .2,
				    	layout: 'hbox',
					    defaults:{margins:'0 5 0 0'},
				    	items:[{
					    		 xtype: 'button',
								 text: '查询',
								 width: 80,
								 iconCls: 'icon-find',
								 handler: this.searchs,
								 scope: this,
								 align:'right'
				    	},{
				    		     xtype: 'button',
								 text: '清空',
								 width: 80,
								 handler: this.clear,
								 scope: this
				    	}]
				    }
				 ]
			}]
		});
	
		this.add(groupFormPanel);
		this.formPanel = groupFormPanel;
		
		
		var groupGrid = new Ext.gr.gv.PageEleGroupGrid({
			region: 'center',
    		margins: '1 0 0 0',
    		pageSize: 10,
		    url: '${ctx}/bookmodules/small-type!list.action'
		});
		
		this.add(groupGrid);
	}
})

四：最后JSP页面显示

        

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ include file="/common/taglibs.jsp" %>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <%@ include file="/wf/public/meta_wf.jsp"%>
    
    <title>My JSP 'view-grid.jsp' starting page</title>
    
	 
	  <!-- 自定义 -->
	  <script src="${ctx}/gzcgZF/app/bookmodules/js/group/groupView.js" type="text/javascript"></script>
      <script src="${ctx}/gzcgZF/app/bookmodules/js/group/gro-gri-pan.js" type="text/javascript"></script>
      <script src="${ctx}/gzcgZF/app/bookmodules/js/group/my-group-view.js" type="text/javascript"></script>

      <script type="text/javascript">
		   Ext.onReady(function(){
		           Ext.QuickTips.init();
		           
				   var groupGirdPanel = new Ext.gr.gv.groupGirdPanel({
				   });
				
				   //定义主界面整体布局
			       var viewport = new Ext.Viewport({
			    	   layout: 'fit',
					   items: [groupGirdPanel]
			       });
	        });
	</script>
  </head>
  
  <body>
     
  </body>
</html>