ext 表单提交
上个ext表单提交的例子，用servlet作为表单的服务器验证，当用户名和密码相同时，提示验证通过，否则提示验证失败。（附例子）帖出ext表单布局代码
Ext.onReady(function(){// 编码方式Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'; // 使用表单提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; // 定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: 'x-plain', defaults: {width: 150}, defaultType: 'textfield',// 默认字段类型 // 定义表单元素 items: [{ fieldLabel: '帐户', name: 'name',// 元素名称 // anchor:'95%',//也可用此定义自适应宽度 allowBlank:false,// 不允许为空 blankText:'帐户不能为空'// 错误提示内容 },{ inputType:'password', fieldLabel: '密码', // anchor:'95%', name: 'pws', allowBlank:false, blankText:'密码不能为空' } ], buttons: [{ text: '登陆', type: 'submit', // 定义表单提交事件 handler:function(){ if(simple.form.isValid()){// 验证合法后使用加载进度条 Ext.MessageBox.show({ title: '请稍等', msg: '正在加载...', progressText: '', width:300, progress:true, closable:false, animEl: 'loding' }); // 控制进度速度 var f = function(v){ return function(){ var i = v/11; Ext.MessageBox.updateProgress(i, ''); }; }; for(var i = 1; i < 13; i++){ setTimeout(f(i), i*150); } // 提交到服务器操作 simple.form.doAction('submit',{ url:'servlet/loginServer',// 文件路径 method:'post',// 提交方法post或get params:'', // 提交成功的回调函数 success:function(form,action){ if (action.result.msg=='ok') { Ext.Msg.alert('登陆成功',action.result.msg); // document.location='index.html'; } else { Ext.Msg.alert('登陆错误',action.result.msg); } }, // 提交失败的回调函数 failure:function(){ Ext.Msg.alert('错误','服务器出现错误请稍后再试！'); } }); } } },{ text: '取消', handler:function(){simple.form.reset();}// 重置表单 }] }); // 定义窗体 win = new Ext.Window({ id:'win', title:'用户登陆', layout:'fit', // 布局方式fit，自适应布局 width:300, height:150, plain:true, bodyStyle:'padding:5px;', maximizable:false,// 禁止最大化 closeAction:'close', closable:false,// 禁止关闭 collapsible:true,// 可折叠 plain: true, buttonAlign:'center', items:simple// 将表单作为窗体元素嵌套布局 }); win.show();// 显示窗体 });
效果图
http://lym6520.iteye.com/upload/attachment/79292/1641585c-e169-3265-8402-09f3f8ce91ec.gif
页:
[1]