一:首先编写父类分组网格,可扩展,可继承的。名称为: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>