Extjs4---Form登录功能的实现，结合struts2

后台用的是struts2，不过没有连接数据库

废话不多说，看代码：

html页面只是做的引用，很简单就不贴源码了

有什么不懂得可以去下载完整的源码：http://download.csdn.net/detail/lc448986375/4575474

添加了验证码功能：http://blog.csdn.net/lc448986375/article/details/8025305

logn.js：

Ext.onReady(
		function(){
			var form = Ext.create(
					'Ext.form.Panel',
					{
						frame:true,
						title:'用户登录',
						width:300,
						height:170,
						//渲染到页面中的loginForm层中
						renderTo:'loginForm',
						//是否可以拖动
						draggable:true,
						//使buttons中的button居中显示
						buttonAlign:'center',
						fieldDefaults:{
							//居左
							labelAlign:'center',
							//宽度
							labelWidth:50,
							anchor: '90%',
							//错误提示显示在一边(side)，还可以配置为under、title、none
							msgTarget: 'side'
						},
						items:[
						       {
						    	   xtype:'textfield',
						    	   fieldLabel:'用户名',
						    	   name:'name',
						    	   //不允许为空
						    	   allowBlank:false,
						    	   blankText:'用户名不能为空'
						       },
						       {
						    	   xtype:'textfield',
						    	   fieldLabel:'密    码',
						    	   name:'password',
						    	   inputType:'password',
						    	   allowBlank:false,
						    	   blankText:'密码不能为空'
						       },
						       {
						    	   xtype:'textfield',
						    	   fieldLabel:'验证码'
						       }
						],
						buttons:[
						         {
						        	 text:'登录',
						        	 width:80,
						        	 height:30,
						        	 handler:function(){
						        		 //获取当前的表单form
						        		 var form = this.up('form').getForm();
						        		 //判断否通过了表单验证，如果不能空的为空则不能提交
						        		 if(form.isValid()){
						        			 //alert("可以提交");
						        			 form.submit(
						        					 {
						        						 clientValidation:true,
						        						 waitMsg:'请稍候',
						        						 waitTitle:'正在验证登录',
						        						 url:'user_login',
						        						 success:function(form,action){
						        							 //登录成功后的操作，这里只是提示一下
						        							 Ext.MessageBox.show({
						                                         width:150,
						                                         title:"登录成功",
						                                         buttons: Ext.MessageBox.OK,
						                                         msg:action.result.msg
						                                     })
						        						 },
						        						 failure:function(form,action){
						        							 Ext.MessageBox.show({
						                                         width:150,
						                                         title:"登录失败",
						                                         buttons: Ext.MessageBox.OK,
						                                         msg:action.result.msg
						                                     })
						        						 }
						        					 		
						        					 }
						        			 )
						        		 }
						        	 }
						         },
						         {
						        	 text:'取消',
						        	 width:80,
						        	 height:30,
						        	 handler:function(){
						        		 //点击取消，关闭登录窗口
						        		 var form = this.up('form');
						        		 form.close();
						        	 }
						         }
						]
					}
			)
		}
)

后台代码UserAction.java:

package action;

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
	//接收name,必须与js中的textfield的name相同，否则取不到值
	private String name;
	private String password;
	//用于告诉前台时候登录成功
	private boolean success;
	
	public String login(){
		if("admin".equals(name) && "admin".equals(password)){
			success = true;
		}else{
			success = false;
		}
		return SUCCESS;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	
}

效果图：

还没有实现验证码功能，有空我会再加上验证码功能