ExtJS登录例子

来源：互联网发布：福娃源码交易平台编辑：程序博客网时间：2024/05/01 23:44

ExtJS3.30+struts2的一个登录例子

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>

</head>

<body>
<br/><br/><br/><br/><br/><br/>
<center>
    <div id="login"></div>
    
</center>
</body>
</html>

LoginSuccess.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LoginSuccess</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../js/loginSuc.js"></script>

</head>

<body>
    <br>Login successfully ! <br>
    <%=
    request.getSession().getAttribute("userName")
    %>
    <div id="loginSuc"></div>
</body>
</html>

Ext.onReady(function() {
var f = new Ext.form.FormPanel({
  // 数据传送到服务器的配置
  url : "login",
  method : "post",
  baseParams : {
   extra : "attach",
   id : 100
   },
  title : "欢迎登陆",
  width : 300,
  height : 150,
  bodyStyle : "padding: 6px",
  labelAlign : "right",
  frame : true,
  items : [
   new Ext.form.TextField({
   name : "userName",
   allowBlank : false, // 不允许为空
   fieldLabel : "用户名",
   labelAlign : "right"
  }), {
   name : "password",
   xtype : "textfield",
   inputType : "password",
   fieldLabel : "密码",
   allowBlank : false // 不允许为空
  },{
   name : "date",
   xtype : "datefield",
   fieldLabel : "日期"
  }
  ],
  buttons : [{
   text : "确定",
   handler : function() {
    // 提交表单
    f.getForm().submit({
     success : function(f,action) {
      Ext.Msg.alert("成功","恭喜，表单提交成功,服务器反馈的结果是：" + action.result.msg,function(btn,text){
       if(btn == "ok"){
        window.location.href="LoginSuccess.jsp";
       }
      });

//      Ext.MessageBox.confirm("成功","恭喜，表单提交成功",function(btn,text){
//       if(btn == "yes"){
//        window.location.href="LoginSuccess.jsp";
//       }
//         });
     },
     failure : function() {
      Ext.Msg.alert("失败","对不起，表单提交失败");
     }
    });
   }
  }, {
   text : "重置",
   handler : function() {
    f.getForm().reset();
   }
  }]
});
f.render("login");
})

loginSuc.js

Ext.onReady(function() {
   var f = new Ext.form.FormPanel({
      xtype : "form",
      title : "Login form",
      labelWidth : 100,
      labelAlign : "left",
      layout : "form",
      width : 258,
      height : 200,
      padding : "10px",
      autoScroll : false,
      frame : true,
      items : [{
         xtype : "textfield",
         fieldLabel : "Name",
         anchor : "100%"
        }, {
         xtype : "textfield",
         fieldLabel : "Password",
         anchor : "100%"
        }],
      buttons : [{
         text : "submit"
        }, {
         text : "reset"
        }]
     })
   f.render("loginSuc");
})

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

</struts>

LoginAction.java

package com.struts2.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport{
/**
*
*/
private static final long serialVersionUID = 1L;
private String userName;
private String password;
private String date;

public void login(){
  System.out.println("--------------------------");
  if((userName!=null || !userName.equals("")) && (password!=null || !password.equals(""))){
   System.out.println("userName: " + userName + " password: " + password + " date: " + date);
   HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(org.apache.struts2.StrutsStatics.HTTP_RESPONSE);
   response.setContentType("text/html;charset=utf-8");
   try {
    PrintWriter out = response.getWriter();
    out.write("{success:true,msg:'服务器结果，成功!'}");
    out.flush();
    out.close();
   } catch (IOException e) {
    e.printStackTrace();
   }

   ActionContext context = ActionContext.getContext();
   Map<String, Object> session = context.getSession();
   session.put("userName", userName);

  }
}
public String getUserName() {
  return userName;
}
public void setUserName(String userName) {
  this.userName = userName;
}
public String getPassword() {
  return password;
}
public void setPassword(String password) {
  this.password = password;
}
public String getDate() {
  return date;
}
public void setDate(String date) {
  this.date = date;
}

}