ExtJs4+Struts2 登陆
1. 登陆页面 index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
<title>欢迎使用XX</title>
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="extjs4/ext-all.js"></script>
<script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
<style type="text/css" title="currentStyle" media="screen" mce_bogus="1">
#divcenter{ /*让div居中*/
position:absolute;
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px; /*注意这里必须是DIV高度的一半*/
margin-left:-150px; /*这里是DIV宽度的一半*/
}
</style>
</head>
<body>
<div id="divcenter">
<div id="form"></div>
</div>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var loginForm = new Ext.form.Panel({
title: '登录', //窗口标题
frame : true,
width: 350,
renderTo : 'form',
bodyStyle:'padding:5px 5px 0',
border : false,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 50
},
defaultType: 'textfield',
defaults: {anchor: '100%' },
items:[{
fieldLabel : '用户名',
name : 'user.username',
},{
name : 'user.password',
fieldLabel: '密码',
inputType : 'password'
}],
buttons:[{
text : '登录',
handler : login
},{
text : '重置',
handler : reset
}]
})
function login(){
loginForm.getForm().submit({
clientValidation : true, //进行客户端验证
url : 'logonAction', //Action
method : 'post', //请求方式
success : function(form,action){
Ext.Msg.alert('登陆成功',action.result.msg);
//登陆成功后 的操作 如页面跳转等
//document.location="logonsuccess.jsp";
},
failure: function(form,action){
Ext.Msg.alert('登陆失败',action.result.msg);
}
})
}
function reset(){
loginForm.form.reset();
}
});
</script>
</html>
2.logonAction
package logon;
import com.opensymphony.xwork2.ActionSupport;
public class LogonAction extends ActionSupport {
private User user;
private String msg; //返回给ext的结果信息
private boolean success; //返回给ext的标志， 这里要设置为boolean
@Override
public String execute() throws Exception {
if(user.getUsername()!=null && user.getPassword()!=null){
if(user.getUsername().equals("GuoJing") && user.getPassword().equals("888888")){
this.setMsg("欢迎你，郭靖！");
this.setSuccess(true);
}else{
this.setMsg("用户名或者密码不正确");
this.setSuccess(false);
}
}else{
this.setMsg("请输入用户名和密码");
this.setSuccess(false);
}
return SUCCESS;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
4.注意所需要的jar包