在做实例之前,首先要明白自己要做到是什么东西,这样才能动手去做,一个简单的流程图:
所以做登录实例很简单,就所简单的做好页面,发送请求,服务端准备好JSON到数据格式返回给客户端。
页面的Ext的代码:
Ext.onReady(function() {
var loginForm = Ext.create('Ext.form.Panel', {
bodyStyle:'padding:5px 5px 0',
width: 350,
border : false,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 30
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: '帐号',
name: 'userName', //就所HTML标记中到name=“”
allowBlank:false,
blankText : '请输入帐号'
},{
fieldLabel: '密码',
name: 'passWord',
inputType : 'password', //输入类型
allowBlank:false,
blankText : '请输入密码'
}]
});
var loginWindow = Ext.create('Ext.window.Window',{
title : '登录',
items : [loginForm],
plain : true,
resizable : false,
buttonAlign : 'center',
buttons: [{
text: '登录',
handler : function(){
if (loginForm.form.isValid()) {
loginForm.form.submit({
waitTitle : '请稍候',
waitMsg : '正在登录......',
url : 'login', //提交到servlet地址
success : function(form, action) {
Ext.Msg.alert('系统提示','登录成功!');
//可以进行别的业务操作,比如跳转页面到你到主页面
},
failure : function(form, action) {
if(action.result){
Ext.Msg.alert('系统提示',action.result.text);
}else{
loginForm.form.reset();
}
}
});
}
}
},{
text: '重置',
handler : function(){
loginForm.form.reset();
}
}]
});
loginWindow.show();
});
servlet代码,主要是获取页面到数据,进行比对,然后返回给页面一到字符串。
其实Ext提交表单是用到Ajax方式,所以也适用一切Ajax提交的方式。主要所通过HttpServletResponse向页面传输数据:
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
String userName = request.getParameter("userName");
String passWord = request.getParameter("passWord");
String result = "";
/**
* 判断用户名存不存在到思路:通过用户名那个去查找用户表,如果没有找到记录说明不存在用户
* 如果存在,取出记录(唯一的)核对密码,通过则登录成功,否则密码错误
* */
if(userName.equals("admin")){
if(passWord.equals("pwd")){
/**
* 通过JSONObject构造返回到数据
* JSONObject json = new JSONObject();
* json.element("success", true);
* json.element("text", "登录成功!");
* **/
result = "{success : true,text : \"登录成功!\"}";
}else{
/**
* JSONObject json = new JSONObject();
* json.element("failure", true);
* json.element("text", "密码错误!");
* **/
result = "{failure : true,text : \"密码错误!\"}";
}
}else{
/**
* JSONObject json = new JSONObject();
* json.element("failure", true);
* json.element("text", \""+userName+"用户不存在!\");
* **/
result = "{failure : true,text : \""+userName+"用户不存在!\"}";
}
/**
* response.getWriter().print(json.toString());
* json.toString()输出到就是"{fail : true,text : \"密码错误!\"}"格式到字符串
* 输出结构怎么样去构造,根据实际需求来,直接用字符串的形式很高效。前提是你的输出结果很简单
* 如果所复杂的结果就必须借助与JSONObject对象来了,开发GridPanel到时候就得用到JSONObject对象准备数据了
* */
response.getWriter().print(result);
response.getWriter().close();
}
}
这个就是简单到ExtJS做的登录验证,然而Struts2怎么做这个验证呢,很简单:
只要在Action里面能拿到HttpServletResponse对象就可以了,向页面写入一些ExtJS接受的JSON字符串就可以了!
实例下载:http://download.csdn.net/source/3555064,QQ群:197331959
http://www.hatustudio.com Leetop/Ext项目论坛
看文章评论一下是美德!!!