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

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

废话不多说，看代码：

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

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

添加了验证码功能：/article/9006006.html

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

}

效果图：



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