|
chendw
- 新手上路
- 11
- 13
- 2008-08-21
|
1#
t
T
发表于 2008-09-21 18:26
|只看楼主
参照网上http://www.dojochina.com/index.php?q=node/936这个文章进行了数据库操作的封装 第一次尝试封装可能会有bug,发现的希望大家联系我。 后台是java写的如果需要后台文件,请上博客上留言www.chendw.cn 先贴调用例子 只要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'
});
});
以下封装的源代码 附件里也是: - /*
- * 封装的综合的Grid控件,继承新增、修改、删除、检索、分页功能。
- * blog:[url]www.chendw.cn[/url]
- * 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') : ''
- }
- });
复制代码
附件: 您需要登录才可以下载或查看附件。没有帐号? 注册
|