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、nonemsgTarget: '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;}}

效果图：

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