Ext学习 form表单的提交方法

简单的ext form表单提交，验证，和服务器回传数据

最近自己学了点ext方面的知识，做了一个简单的form表单和Struts集成。感觉从中学到了很多。想把自己的心得写出来和大家分享。

1 首先来看前台的页面代码：

<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>

Struts2 的Struts.xml文件配置代码片段：

<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

相应的Java代码片段：

private String msg;
private boolean success;

//必要的业务逻辑处理
public String validateLogins() {

			this.setMsg("ok");
			this.success = true;
		
		return SUCCESS;
	}

在java代码中。msg ，success两个属性必须得有。