EXT公共控件之动态列的FormPanel

本类提供带window的formPanel,可以实现动态地设置一个formPanel中的列数，类本身可以作为一个弹出式窗口显示，也可通过类中提供的函数getFormPanel取得formPanel放到其他EXT容器中去。示例如下：

var userName = new Ext.form.TextField({ fieldLabel : '用户', name : 'username', html : '<br>', width : 183, allowBlank : false }); var passWord = new Ext.form.TextField({ xtype : 'textfield', inputType : 'password', fieldLabel : '密 码', name : 'xwkPass' }); var hiddenPass = new Ext.form.Hidden({ name : 'password' }); var formPanel = new WebControl.FormPanel({ columnNums:1, title:'登录测试', commitCallBackFun:onSubmit, commitUrl:"loginAction.action", formControl:[[userName,passWord,hiddenPass]] }); formPanel.init(); formPanel.showInWin(); function onSubmit(result,success){ alert([result.success,result.errMsg]); }

下面是源代码：

WebControl.FormPanel = function(config){ /** * 提交后台处理URL */ this.commitUrl = config.commitUrl; /** * 提交后台的参数；是除FormPanel本身以外的参数 */ this.commitParams = config.commitParams?config.commitParams:{}; /** * FORM提交后的回调处理函数 */ this.commitCallBackFun = config.commitCallBackFun; /** * 提交按钮的文本 */ this.commitBtnText = config.commitBtnText?config.commitBtnText:'提交'; /** *重置按钮定制方法 *【主要针对表单状态为'修改'(非'新增')时, *提交表单数据可能含隐藏字段, *若用reset方法将把隐藏字段值也一并清掉。 *考虑这种情况需自定义表单重置方法】 */ this.resetBtnFun = config.resetBtnFun; /** * formPanel中控件放置的列数 */ this.columnNums = config.columnNums?config.columnNums:1; /** * formPanel中的录入控件，以二维数组的形式传入， * 例如： * 定了四个TextField控件，名称分别为text1,text2,text3,text4, * 1.如果formPanel为一列，设置columnNums为1,formControl设置为 * [[text1,text2,text3,text4]] * 2.如果formPanel为二列或以上，设置columnNums为2,formControl设置为 * [[text1,text2],[text3,text4]]，第一个数组中的控件放置在第一列， * 第二个数组中的控件放置在第二列,控件在一列当中的前后顺序是由其在数组中 * 的位置决定的；这里，text1在第一行，text2在第二行。 * 3.建议一个formPanel中的列数不要超过四列。 * */ this.formControl = config.formControl; /** * true表示这个formPanel需要一个window来装载显示；否则不需要 */ this.isWin = config.isWin?config.isWin:true; /** * formPanel中控件的标题的宽度 */ this.labelWidth = config.labelWidth?config.labelWidth:40; /** * 显示的标题文字 * 如果isWin属性设置为true,则标题文字显示在window的title中； * 否则显示在formPanel的title,如果title不赋值或为null值， * 则formPanel无标题。 */ this.title = config.title; /** * 装载formPanel的window的宽度 */ this.winWidth = config.winWidth?config.winWidth:300; /** * 装载formPanel的window的高度 */ this.winHeight = config.winHeight?config.winHeight:250; //以下为类体中的局部变量 var commitBtn; //提交按钮 var canceBtn; //取消按钮 var resetBtn; //重置按钮 var form; //formPanel var win; //window /** * 初始化 */ this.init=function(){ commitBtn = new Ext.Button({ text : this.commitBtnText, handler : function(){ this.commit(); }.createDelegate(this) }); canceBtn = new Ext.Button({ text : '取消', handler : function(){ win.hide(); }.createDelegate(this) }); resetBtn = new Ext.Button({ text : '重置', handler : function(){ if(this.resetBtnFun){ this.resetBtnFun(this); }else{ this.getForm().reset(); } }.createDelegate(this) }); form = new Ext.form.FormPanel({ url : this.commitUrl, labelAlign: 'right', labelWidth: this.labelWidth, frame: true, bodyStyle: 'padding:8px 0 0 0;', buttonAlign:'right', defaults : {anchor : '98%'}, items:[{ layout : 'column', border : false, baseCls : 'x-plain' }] }); if(this.columnNums>1){ initMuliColumnForm(this.columnNums,this.formControl); }else{ var column = new Ext.Panel({ columnWidth : 1, layout:'form', border:false, baseCls:'x-plain', defaults:{anchor:'98%'} }) for(var i=0;i<this.formControl[0].length;i++){ column.add(this.formControl[0][i]); form.items.items[0].add(column); } } form.doLayout(); if(this.isWin){ win = new Ext.Window({ title : this.title, width : this.winWidth, resizable : false, autoHeight : true, modal : true, buttonAlign:'center', closeAction : 'hide', buttons:[commitBtn,resetBtn,canceBtn] }); }else{ if(this.title){ form.setTitle(this.title); } } }; this.getForm=function(){ return form.getForm(); }; this.getFormPanel=function(){ return form; }; this.getWin=function(){ if(win) return win; else return null; }; this.showInWin=function(){ if(win){ win.add(form); win.show(); } }; this.commit = function(){ this.getForm().submit({ url:this.commitUrl, params:this.commitParams, clientValidation: true, method:'post', success:function(form, action){ if(this.commitCallBackFun){ this.commitCallBackFun(action.result); }; }.createDelegate(this), failure: function(form, action){ switch (action.failureType){ case Ext.form.Action.CLIENT_INVALID: WebControl.showErrMsg("录入的数据无效,请检查!"); break; case Ext.form.Action.CONNECT_FAILURE: WebControl.showErrMsg("服务器连接失败,请稍后再试!"); break; case Ext.form.Action.SERVER_INVALID: WebControl.showErrMsg(action.result.errMsg); break; default: WebControl.showErrMsg(action.result.errMsg); break; } }.createDelegate(this) }); }; this.destory = function(){ if(win){ win.destroy(); } form.destroy(); resetBtn.destroy(); commitBtn.destroy(); canceBtn.destroy(); }; initMuliColumnForm = function(columnNums,formControl){ var columnWidth = (100/columnNums)/100; for(var i=0;i<columnNums;i++){ var column = new Ext.Panel({ columnWidth : columnWidth, layout:'form', border:false, baseCls:'x-plain', defaults:{anchor:'93%'} }) for(var j=0;j<formControl[i].length;j++){ column.add(formControl[i][j]); } form.items.items[0].add(column); } }; this.init(); }