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>