封装的ExtGrid 实现增、删、改、查等功能
只要new一个新对象后新增修改等表单将根据定义的信息 自动生成提高开发效率
调用例子：
Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var gridStructure = [// grid的数据结构 { header : '事件编号', name : 'SJID', hidden : "true", type:'label' }, { header : '研究项目号', name : 'YJXMBH', width : 200, type:'combo', //绑定数据库 fobj:'YL_YJXM', text:'XMMC', value:'YJXMBH' //绑定数组 //fobj:[[1,'是'],[2,'否']] }, { header : '时间点', name : 'SJD', align : 'center', width : 100, type:'number' //rendererunction(v){return v=='4.0'?'是':'否'} }, { header : '时间点描述', name : 'SJDMS', align : 'center', width : 100 }, { header : '事件', name : 'SJ', align : 'center', width : 100 }, { header : '检查项目编号', name : 'JCXMBH', align : 'center', width : 100 }]; var myUxGrid = new Ext.ux.grid.MyGrid({// 创建封装的MyGrid对象 id : 'dept-center-stat-grid', url : 'http://localhost080/YLXT/servlet/DealDataJsonServlet.do', selectType : 'check', // dataObject : myGridData, // defaultSortField : 'stat_sn', // keyField : 'basicUnitNo', structure : gridStructure, autoScroll : true, autoWidth : true, frame : true, bodyStyle : 'width:100%', layout : 'fit', height : 600, findField:'YJXMBH', //指定搜索字段 keyField:'SJID', //指定主键字段 loadMask : { msg : label.wait }, title : '研究步骤维护', renderTo : Ext.getBody(), tablename : 'YL_YJBZ' }); });
以下封装的源代码：
view plaincopy to clipboardprint?
/*
* 封装的综合的Grid控件，继承新增、修改、删除、检索、分页功能。
* blog：www.chendw.cn
* code by cdw
*/
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel, {
// 储存表格结构
structure : '',
// 表格绑定的表
tablename : '',
// 指定加载的列 默认为读取表上所有列数据
fields : '',
// 每页显示条数
pageSize : '15',
// 表单里控件的默认宽
fieldwidth : 200,
// reader类型如果当为json的时候那么url不能空，当为array的时候dataObject不能为空
readType : 'json',
// 获取数据的URL
url : '',
// 数据对象
dataObject : null,
// 表格主键
keyField : '',
// 绑定查询的列
findField : 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 : 'ID',
// 是否需要分页工具栏，默认为true
needPage : true,
frame : false,
// 是否带展开按钮，默认为false
collapsible : false,
animCollapse : true,
loadMask : true,
viewConfig : {
forceFit : true
},
// 存储表头信息
col : null,
// private
initComponent : function() {
if (this.structure != '') {
this.initStructure();
}
Ext.ux.grid.MyGrid.superclass.initComponent.call(this);
},
// private
initEvents : function() {
Ext.ux.grid.MyGrid.superclass.initEvents.call(this);
/*
* this.getStore().load( { params : { start : 0, limit : 30 } });
*
*/
if (this.loadMask) {
// Ext.MessageBox.wait('sssssss')
this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {
store : this.store
}, this.loadMask));
}
},
// private
initStructure : function() {
var oDs = null;
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];
// alert( c.hidden ? c.width: this.fieldwidth)
// 如果字段为hidden，则不生成filters和columnMode
// 默认格式化日期列
if (c.type == 'date' && !c.renderer) {
c.renderer = this.formatDate;
}
oCM[oCM.length] = {
header : c.header,
dataIndex : c.name,
hidden : c.hidden || false,
width : !c.hidden ? c.width : this.fieldwidth,
// 类型为数字则右对齐
align : c.type == 'numeric' ? 'right' : 'left',
// 结构的渲染函数
renderer : c.renderer
};
oRecord[oRecord.length] = {
name : c.name,
// 如果类型不是date型则全部为string型
type : c.type == 'date' ? 'date' : 'string',
dateFormat : 'Y-m-d'
};
}
this.col = oCM;
// 生成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;
var tablename = this.tablename;
var pageSize = this.pageSize;
var fields = this.fields;
switch (this.readType) {
case 'json':
reader = new Ext.data.JsonReader( {
totalProperty : "Count",
root : "List",
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,
listeners : {
'reload' : function() {
alert('reload')
}
}
});
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.store
});
pagingToolbar.pageSize = this.pageSize;
this.bbar = pagingToolbar;
this.bottomToolbar = this.bbar;
var oSearch = new Ext.form.TextField( {
id : 'search',
xtype : 'textfield',
align : 'right'
})
var ogrid = this;
var keyField = this.keyField;
// 生成顶部工具条
var topToolbar = new Ext.Toolbar( {
items : [ {
iconCls : 'add',
text : "新增",
handler : function() {
ogrid.doEdit();
}
}, {
iconCls : 'edit',
text : "修改",
handler : function() {
var record = ogrid.getSelectionModel().getSelected();
if (record == null) {
Ext.Msg.alert('提示', '请先选择你要编辑的数据');
return;
}
var id = record.get(keyField);
ogrid.doEdit(id);
}
}, {
iconCls : 'remove',
text : "删除",
handler : function() {
ogrid.doDelete();
}
}, {
iconCls : 'x-btn-text x-tbar-loading',
text : "刷新",
handler : function() {
ogrid.getStore().reload();
},
scope : this
}, '->', '项目名称：', oSearch, {
iconCls : 'search',
text : "搜索",
handler : function() {
ogrid.getStore().reload();
}
}
]
})
}
this.tbar = topToolbar;
this.topToolbar = this.tbar;
// 将filter加入grid
// this.plugins = filters;
var findField = this.findField;
this.store.on('beforeload', function() {
var scondition = "";
if (oSearch.getValue()) {
scondition = findField + " like '%" + oSearch.getValue() + "%'";
}
var para = {
action : 'show',
pageSize : pageSize,
name : tablename,
// fields : fields,
condition : scondition,
tmpId : '',
tmpName : ''
};
Ext.apply(this.baseParams, para);
});
this.store.load( {
params : {
start : 0,
limit : 10
}
});
}
,
/*
* @功能：编辑用户选中的数据 @参数：id 为空则为新增数据 不为空则为修改数据
*
*/
doEdit : function(id) {
var tablename = this.tablename;
var keyField = this.keyField;
var url = this.url;
var ogrid = this;
var oField = new Array();
var len = this.structure.length;
var action = "";
// 判断id是否为空 是：新增 否：修改
action = id ? 'edit' : 'new';
// ========== 初始化字段信息 开始==============
for ( var i = 0; i < len; i++) {
var c = this.structure[i];
var type;
var ds;
c.type = c.type || 'string'; // 默认类型为string
switch (c.type) {
case 'string':
oField[oField.length] = {
xtype : 'textfield',
id : tablename + '_' + c.name,
fieldLabel : c.header,
anchor : '90%',
allowBlank : c.required ? false : true
}
break;
case 'number':
oField[oField.length] = {
xtype : 'numberfield',
id : tablename + '_' + c.name,
fieldLabel : c.header,
anchor : '90%',
allowBlank : c.required ? false : true
}
break;
case 'date':
oField[oField.length] = {
xtype : 'datefield',
id : tablename + '_' + c.name,
fieldLabel : c.header,
format : 'Y-m-d',
anchor : '90%',
allowBlank : c.required ? false : true
}
break;
case 'combo':
// 初始化下拉列表数据
c.value = c.value || 'value';
c.text = c.text || 'text';
ds = this.initCombo(c);
oField[oField.length] = {
xtype : 'combo',
hiddenName : tablename + '_' + c.name,
fieldLabel : c.header,
anchor : '90%',
store : ds,
displayField : c.text,
valueField : c.value,
typeAhead : true,
triggerAction : 'all',
selectOnFocus : true,
mode : 'local',
allowBlank : c.required ? false : true,
listeners : {
'blur' : function() {
(this.setValue(this.getValue()))
}
}
}
break;
case 'label':
oField[oField.length] = {
xtype : 'textfield',
disabled : true,
id : tablename + '_' + c.name,
fieldLabel : c.header,
anchor : '90%',
value : '系统将自动生成'
}
}
}
// ------------- 初始化字段信息 结束------------
// 初始化表单结构
var editForm = new Ext.form.FormPanel( {
labelWidth : 80,
frame : true,
border : false,
hideBorders : true,
autoHeight : true,
items : oField,
buttons : [ {
text : '保存',
handler : function() {
doSubmitFrom()
}
}, {
text : '关闭',
handler : function() {
addWin.hide();
addWin.destroy();
}
} ]
})
var addWin = new Ext.Window( {
title : '研究项目维护',
labelWidth : 100,
frame : true,
autoHeight : true,
height : 400,
width : 650,
items : editForm
})
addWin.show()
// 从服务器初始化表单数据
if (id != null && id != '') {
Ext.MessageBox.wait('正在数据加载,请稍后......', '请稍后')
editForm.form.load( {
url : url,
params : {
action : 'load',
name : tablename,
fieldkey : keyField,
condition : keyField + "='" + id + "'",
id : id
},
method : 'post',
success : function(action, form) {
Ext.MessageBox.hide();
},
failure : ogrid.doFailure
});
}
// 保存表单数据
function doSubmitFrom() {
if (editForm.form.isValid()) {
editForm.form.url = url + '?action=' + action + '&name='
+ tablename + '&fieldkey=' + keyField + '&id=' + id;
editForm.form.submit( {
waitTitle : "请稍候",
waitMsg : "正在提交表单数据，请稍候。。。。。。",
success : function() {
ogrid.getStore().reload();
Ext.Msg.alert('提示', '操作成功');
},
failure : ogrid.doFailure
});
}
}
},
/*
* @功能：删除所有选中记录支持批量删除
*
*/
doDelete : function() {
var sSelId = "";
var ogrid = this;
var tablename = this.tablename;
var keyField = this.keyField;
var url = this.url;
var aId = new Array();
// 从GRID对象中获得Value
var record = this.getSelectionModel().getSelected();
if (!record) {
Ext.Msg.alert("提示", "请先选择要删除的数据!");
return;
} else {
for ( var i = 0, j = this.store.getCount(); i < j; i++) {
if (this.getSelectionModel().isSelected(i)) {
sSelId += "'" + this.store.getAt(i).get(keyField) + "',";
aId[aId.length] = this.store.getAt(i)
}
}
if (sSelId.length > 0) {
sSelId = sSelId.substr(0, sSelId.length - 1);
}
}
Ext.MessageBox.confirm('确认删除', '你真的要删除所选数据吗?', function(btn) {
if (btn == 'yes') {// 选中了是按钮
Ext.MessageBox.wait("正在删除数据，请稍候。。。。。。", "请稍后");
Ext.Ajax.request( {
url : url,
success : function() {
Ext.Msg.alert('提示', '操作成功');
for ( var i = 0; i < aId.length; i++) {
ogrid.store.remove(aId[i]);
}
},
failure : ogrid.doFailure,
params : {
action : 'delete',
name : tablename,
fieldkey : keyField,
id : sSelId
}
});
}
});
},
/*
* @功能：初始化combo控件数据
*
*/
initCombo : function(o) {
var url = this.url;
var fields = o.value + ',' + o.text;
var ds = null;
if (typeof o.fobj != 'object') {
var reader = new Ext.data.JsonReader( {
totalProperty : 'Count',
root : 'List'
}, [ {
name : o.value
}, {
name : o.text
} ]);
ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : url
}),
reader : reader
});
ds.on('beforeload', function() {
// Ext.MessageBox.wait('正在加载数据请稍后。。。。。。','请稍后')
var para = {
action : 'show',
pagesize : '999',
name : o.fobj,
fields : fields
};
Ext.apply(ds.baseParams, para);
});
} else {
ds = new Ext.data.Store( {
proxy : new Ext.data.MemoryProxy(o.fobj),
reader : new Ext.data.ArrayReader( {}, [ {
name : 'value'
}, {
name : 'text'
} ]),
autoLoad : true
});
}
ds.load( {
params : {
start : 0,
limit : 10
}
});
return ds;
},
/*
* @功能：请求成功显示信息
*/
doSuccess : function(action, form) {
var ogrid = this;
Ext.Msg.alert('提示', '操作成功');
ogrid.getStore().reload();
},
/*
* @功能：请求失败显示信息
*/
doFailure : function(action, form) {
Ext.Msg.alert('请求错误', '服务器未响应，请稍后再试');
},
/*
* @功能:默认的格式化日期函数 @返回格式：2008-09-21
*/
formatDate : function(v) {
return v ? v.dateFormat('Y-m-d') : ''
}
});