[size=large][color=darkred]简单的ext form表单提交,验证,和服务器回传数据[/color][/size]
最近自己学了点ext方面的知识,做了一个简单的form表单和Struts集成。感觉从中学到了很多。想把自己的心得写出来和大家分享。
[size=small][color=darkred][b]1 首先来看前台的页面代码:[/b][/color][/size]
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /><script type="text/javascript" src="js/ext-base.js"></script><script type="text/javascript" src="js/ext-all.js"></script><script type="text/javascript" src="js/ext-lang-zh_CN-min.js"></script><!--红色标记的为ext程序中最基本的js文件,并且在用的时候要注意他们的顺序。现在分别介绍一下他们的位置:ext-all.js,adapter/ext/ext-base.js,build/locale/ext-lang-zh_CN.js和整个resources目录。ext-all.js,adapter/ext/ext-base.js就包含了ext的所有功能,所有的js脚本都在这里了。build/locale/ext-lang-zh_CN.js是中文翻译。resources目录下是css样式表和图片。-->script type="text/javascript" >Ext.onReady(function(){ Ext.QuickTips.init();var form = new Ext.form.FormPanel({ defaultType: 'textfield', labelAlign: 'center', title: 'ext', labelWidth: 70, frame: true, width: 220, items: [ { fieldLabel: '用户名', id:'userName', name:'loginBean.userName', emptyText:'请输入用户名' , allowBlank:false, blankText:'用户名不能为空'}, { fieldLabel:'密码', inputType:'password', id:'passWord', name:'loginBean.passWords', allowBlank:false, blankText:'密码不能为空'}], buttons : [{ text : '登录', type : 'submit', handler : function() { if(form.form.isValid()){ var but = this; but.setDisabled(true); this.setText('正在登录'); <!--将表单提交--> form.form.doAction('submit',{ url : 'loginvalidate.action', method : 'POST', success : function(form, action) { if (action.result.msg=="ok") { Ext.Msg.alert('登录成功',action.result.msg); document.location='index.jsp'; } }, failure : function(form,action) { but.setText("登录"); but.setDisabled(false); } }); }} }]});form.render("form");});</script>
[size=small][color=darkred]Struts2 的Struts.xml文件配置代码片段:[/color][/size]
<package name="login" namespace="/" extends="[color=red]json-default[/color]"> <action name="login" class="loginAction" method="login"> <result>/WEB-INF/login/login.jsp </result> </action> <action name="loginvalidate" class="loginAction" method="validateLogins"> <result type="json"> </result> </action> </package>
在struts.xml中,红色部分得注意,要想用json数据得引入json-plugin
[size=small][color=darkred][b]相应的Java代码片段:[/b][/color][/size]
private String msg;private boolean success;//必要的业务逻辑处理public String validateLogins() { this.setMsg("ok"); this.success = true; return SUCCESS; }
在java代码中。msg ,success两个属性必须得有。
相关资源:EXT异步提交FORM表单