通过对Ext的学习,发现学习分三部曲:1.看官网的Demo,宏观了解Ext能做什么;2.看相关书籍,做理论指导;3.实现官网的Demo,体会Ext的真谛。
在完成了第一、二部后,现在我们需要做的是实现第三步,我的目标效果是用Extjs画页面,用Asp.Net的一般处理程序做后台服务器实现登录功能。
宏观上的指导有了,下面进行细分,我整理了实现过程,思路如下:
1.画一个登录的Panel--loginPanel;
2.定义一个检测是否登录成功的函数CheckLogin;
3.定义一个登录窗体--win,将loginPanel添加到登录窗体中;
4.在登录窗体中添加“确定”和“取消”,为“确定”按钮绑定登录验证函数CheckLogin;
5.为登录窗体绑定一个最小化事件;
6.定义一个登录成功弹出新窗体函数loginSuccess
有了理论指导,下面进行代码实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="js/ext-base.js" type="text/javascript"></script>
<script src="js/ext-all.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var loginPanel;
Ext.onReady(function () {
//1.画一个登录的Panel
loginPanel = new Ext.form.FormPanel({
labelWidth: 40,
width: 230,
height: 120,
frame: true,
bodyStyle: "padding:20", //给这个面板添加内间距
items: [
{ xtype: "textfield", id: "userName", fieldLabel: "用户名", style: "margin:1 3 15 3", labelWidth: 10, emptyText: "请输入用户名...", allowBlank: false, blankText: "用户名不能为空" },
{ xtype: "textfield", id: "userPass", fieldLabel: "密 码", style: "margin:1 3 15 3", labelWidth: 10, inputType: "password" }
]
});
//2.定义一个检测是否登录成功的函数CheckLogin
function CheckLogin() {
var userName = Ext.getCmp("userName").getValue(); //用户名
var userPass = Ext.getCmp("userPass").getValue(); //密 码
if (Ext.util.Format.trim(userName) == "" || Ext.util.Format.trim(userPass) == "") {//用户名和密码不能为空
Ext.Msg.alert("提示", "用户名或密码不能为空");
return;
}
Ext.Ajax.request({
url: "Extjs.ashx?userName=" + userName + "&passWord=" + userPass, //将用户名和密码传送到url
method: "get",
success: function (response) {
var getData = response.responseText; //获取服务器数据
if (getData == "ok") {
loginSuccess(); //登录成功了
} else {
Ext.Msg.alert("警告", "登录失败!");
}
}, failure: function (response, options) { alert("失败"); }
});
}
//3.定义一个登录窗体--win,将loginPanel添加到登录窗体中;
var win = new Ext.Window({
title: "登录窗体",
minimizable: true, //最小化
maximizable: true, //最大化
width: 240,
height: 186,
frame: true,
items: [loginPanel],
//4.在登录窗体中添加“确定”和“取消”,为“确定”按钮绑定登录验证函数CheckLogin
buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}]
});
//5.为登录窗体绑定一个最小化事件
win.minimize = function () {
Ext.MessageBox.confirm("提示", "是否要最小化", minwindow);
function minwindow(btn) {
if (btn == "yes") {
Ext.Msg.alert("提示", "确定最小化么", function () { alert("成功最小化"); });
}
}
}
//6.定义一个登录成功弹出新窗体函数loginSuccess;
function loginSuccess() {
var winLoginSuccess = new Ext.Window({
title: "登录成功后的窗体",
minimizable: true, //最小化
maximizable: true, //最大化
collapsible: true,
width: 550,
height: 550,
frame: true,
items: [{ xtype: "button", frame: true, text: "我是登录成功后窗体的一个按钮"}]
});
win.hide(); //登录窗体隐藏
winLoginSuccess.show(); //显示登录成功后的窗体
}
win.show(); //显示窗体
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
后台Extjs一般处理程序的代码实现:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Demo
{
/// <summary>
/// Extjs 的摘要说明
/// </summary>
public class Extjs : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request.QueryString["userName"];
string userPass = context.Request.QueryString["passWord"];
if (userName == "quwenzhe" && userPass == "123")
{
context.Response.Write("ok"); //如果验证成功则返回ok
}
else
{
context.Response.Write("fail");//如果验证失败则返回fail
}
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
代码的执行过程:当点击确定按钮后,会触发CheckLogin函数,CheckLogin通过Ajax将获取的数据传到Extjs一般处理程序进行检验,并获取Extjs一般处理程序的返回值。如果返回值是ok,则调用loginSuccess函数弹出新窗体;否则,则弹出登录失败的提示。
运行代码后,登录页面效果图如下:
登录成功后的效果图如下:
到此,用Extjs实现的登录功能已经完成。此外, 在学习过程中,发现自己存在浅尝辄止的问题,刚学会一点就以为自己明白了,希望大家能引以为戒,不要犯同样的错误。
Ext是个很好的框架,学好它在很大程度上能帮助我们学习DWZ,希望大家能用心学习这块。