<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<!--ExtJs官方2.0下载css文件-->
<link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!--ExtJs官方2.0下载ext_base.js文件-->
<script src="ExtJs/ext-base.js" type="text/javascript"></script>
<!--ExtJs官方2.0下载ext-all.js文件-->
<script src="ExtJs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var loginPanel;
Ext.onReady(function() {
//登录面板
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" }
]
});
//登录成功后就弹出一个新窗体
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(); //显示登录成功后的窗体
}
//登录窗体
var win = new Ext.Window({
title: "登录窗体",
minimizable: true, //最小化
maximizable: true, //最大化
width: 240,
height: 186,
frame: true,
items: [loginPanel],
buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}]
});
//最小化事件
win.minimize = function() {
// this.hide();
Ext.MessageBox.confirm("提示", "是否要最小化", minWindow);
function minWindow(btn) {
if (btn == "yes") {
Ext.Msg.alert("提示", "确定最小化么", function() { alert("成功最小化"); });
}
}
}
win.show(); //显示窗体
//验证用户登录信息(连接数据库)
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: "Handler2.ashx?ParamUserName=" + userName + "&ParamUserPass=" + userPass, //将用户名和密码传送到url
method: "get",
//params: { ParamUserName: userName, ParamUserPass: userPass },
success: function(response) {
var getData = response.responseText; //获取服务器数据
if (getData == "ok") {
loginSuccess(); //登录成功了
} else {
Ext.Msg.alert("警告","登录失败!");
}
},
failure: function(response, options) { alert("失败"); }
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
//Handler2.ashx
<%@ WebHandler Language="C#" Class="Handler2" %>
using System;
using System.Web;
public class Handler2 : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string userName = context.Request.QueryString["ParamUserName"];
string userPass = context.Request.QueryString["ParamUserPass"];
/***
* 这期间可以进行连接数据库,进行验证
* */
if (userName == "admin" && userPass == "123")
{
context.Response.Write("ok"); //如果验证成功则返回ok
}
else {
context.Response.Write("fail");//如果验证失败则返回fail
}
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
预览效果如下: