| |
|
|
|
|
2008-05-13
|
作者：本站论坛会员：louis75168611
在以往建立grid的时都要建立很多的辅助类，比如store，column和record等等。尤其当一个页面里面有多个grid的时候，这样会有很多的冗余代码。使页面加载很忙。
因此自己找了相关的文件，写了一个grid的扩展类。使建立grid只需几行代码就可完成。
以下为扩展文件。其扩展类的名字为Ext.ux.grid.SimpleGrid。文件名字为：Ext.ux.grid.SimpleGrid.js
详细内容请查看代码。
// 重新扩展的grid组建
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.SimpleGrid = Ext.extend(Ext.grid.GridPanel, {
// 表格结构
structure : '',
//reader类型如果当为json的时候那么url不能空，当为array的时候dataObject不能为空
readType:'json',
// 获取数据的URL
url : '',
// 关键字段
keyField : '',
//数据对象
dataObject:null,
//是否需要分组，默认为false，如果设置为true须再设置两个参数一个为myGroupField和myGroupTextTpl
needGroup:false,
//分组的字段名称
myGroupField:'',
//分组显示的模板，eg：{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})
myGroupTextTpl:'',
//列模式的选择模式,默认为rowselectModel，如果相设置成check模式，就设置为check
selectType:'',
// 默认排序字段
defaultSortField : '',
// 是否需要分页工具栏，默认为true
needPage : true,
frame : false,
//是否带展开按钮，默认为false
collapsible : false,
animCollapse : true,
loadMask : true,
viewConfig : {
forceFit : true
},
// private
initComponent : function() {
if (this.structure != '') {
this.initStructure();
}
Ext.ux.grid.SimpleGrid.superclass.initComponent.call(this);
},
// private
initEvents : function() {
Ext.ux.grid.SimpleGrid.superclass.initEvents.call(this);
/* this.getStore().load( {
params : {
start : 0,
limit : 30
}
});
*/if (this.loadMask) {
this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {
store : this.store
}, this.loadMask));
}
},
// private
initStructure : function() {
var oCM = new Array(); //列模式数组
var oRecord = new Array(); //容器对数组
// 构成grid的两个必须组件: column和record，根据structure将这两个组件创建出来
//判断表格的选择模式
if(this.selectType=='check'){
var sm = new Ext.grid.CheckboxSelectionModel();
oCM[oCM.length] = sm;//在列模式数组中添加checkbox模式按钮
this.selModel = sm;//并将selModel设置为check模式
}
var len = this.structure.length;//得到结构的长度
for (var i = 0;i < len; i++) {
var c = this.structure[i];
// 如果字段为hidden，则不生成filters和columnMode
if (c.hidden == undefined || !c.hidden) {
oCM[oCM.length] = {
header : c.header,
dataIndex : c.name,
width : c.width,
// 类型为数字则右对齐
align : c.type == 'numeric' ? 'right' : 'left',
// 结构的渲染函数
renderer : c.renderer
};
}
oRecord[oRecord.length] = {
name : c.name,
// 如果类型不是date型则全部为string型
type : c.type == 'date' ? 'date' : 'string'
};
}
// 生成columnModel
this.cm = new Ext.grid.ColumnModel(oCM);
//this.colModel = this.cm;
// 默认可排序
this.cm.defaultSortable = true;
// 生成表格数据容器
var record = Ext.data.Record.create(oRecord);
//判断读取类别，目前只实现了，jsonreader和arrayReader
var reader;
switch (this.readType){
case 'json':
reader = new Ext.data.JsonReader( {
totalProperty : "totalCount",
root : "result",
id : this.keyField //关键字段
}, record);
this.ds = new Ext.data.GroupingStore( {
proxy : new Ext.data.HttpProxy( {
url : this.url
}),
reader : reader,
sortInfo : {field : this.defaultSortField,direction : 'ASC' },
remoteSort : true ,
groupField:this.myGroupField
});
break;
case 'array':
reader = new Ext.data.ArrayReader({},record);
this.ds = new Ext.data.GroupingStore({
reader: reader,
data: this.dataObject,
sortInfo : {field : this.defaultSortField,direction : 'ASC' },
groupField:this.myGroupField
});
break;
default:
break;
}
//判断是否需要分组
if(this.needGroup){
this.view = new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl:this.myGroupTextTpl
})
}
this.store = this.ds;
// 生成分页工具栏
/* if (this.needPage) {
var pagingToolbar = new Ext.PagingToolbar( {
displayInfo : true,
displayMsg : '当前记录数: {0} - {1} 总记录数: {2}',
emptyMsg : '没有符合条件的记录',
store : this.ds
});
pagingToolbar.pageSize = 30;
this.bbar = pagingToolbar;
this.bottomToolbar = this.bbar;
} */
// 将filter加入grid
// this.plugins = filters;
}
});
它的用法如下：
首先先引用写好的扩展文件。在页面中把ext核心文件加载后，再建在Ext.ux.grid.SimpleGrid.js文件。
例如：<script src = 'Ext.ux.grid.SimpleGrid.js'></script>
在页面中：
<html>
<head>
<!--引用所有的ext的核心文件 -->
....代码略
<!--引用Ext.ux.grid.SimpleGrid.js文件 -->
....代码略
</head>
<body>
<div id="emp3-grid"><div>
<script language="javascript">
//本例是一个数组grid
var myGridData = [//数据源
[1,'01','局长','局级干部……'],
[2,'02','处长','处级干部……'],
[3,'03','科长','科长干部……'],
[4,'04','科员','普通科员……'],
[5,'05','职员','普通职员……']
];
var gridStructure = [//grid的数据结构
{
name:"stat_id",
header:"岗位编号",
hidden:true
},{
name : 'stat_sn',
header : "岗位排序号",
width : 50
},{
name : 'stat_name',
header : "岗位名称",
width : 130
},{
name:"stat_desc",
header:"岗位描述",
width:130
}];
var myUxGrid = new Ext.ux.grid.SimpleGrid({//创建岗位的tab面板信息
id : 'dept-center-stat-grid',
// url : 'getBasicUnits.action',
readType:'array', //确定数据源类型的参数
selectType:'check',
dataObject:myGridData ,
defaultSortField : 'stat_sn',
// keyField : 'basicUnitNo',
structure: gridStructure,
width : 700,
//height : 600,
title : '岗位信息' ,
renderTo:'temp3-grid'
});
</script>
</body>
</html>
|
|
|
|
