01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 02. 03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 04. 05.<html xmlns="http://www.w3.org/1999/xhtml"> 06.<head runat="server"> 07. <title></title> 08. <!--ExtJs官方2.0下载css文件--> 09. <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 10. <!--ExtJs官方2.0下载ext_base.js文件--> 11. <script src="ExtJs/ext-base.js" type="text/javascript"></script> 12. <!--ExtJs官方2.0下载ext-all.js文件--> 13. <script src="ExtJs/ext-all.js" type="text/javascript"></script> 14. <script type="text/javascript" language="javascript"> 15. var loginPanel; 16. Ext.onReady(function() { 17. //登录面板 18. loginPanel = new Ext.form.FormPanel({ 19. labelWidth: 40, 20. width: 230, 21. height: 120, 22. frame: true, 23. bodyStyle:"padding:20", //给这个面板添加内间距 24. items: [ 25. { xtype: "textfield", id: "userName", fieldLabel: "用户名" ,style:"margin:1 3 15 3", labelWidth: 10, emptyText: "请输入用户名...", allowBlank: false, blankText: "用户名不能为空" }, 26. { xtype: "textfield", id: "userPass", fieldLabel: "密 码", style: "margin:1 3 15 3", labelWidth: 10, inputType: "password" } 27. ] 28. }); 29. //登录成功后就弹出一个新窗体 30. function loginSuccess() { 31. var winLoginSuccess = new Ext.Window({ 32. title:"登录成功后的窗体", 33. minimizable: true, //最小化 34. maximizable: true, //最大化 35. collapsible: true, 36. width: 550, 37. height: 550, 38. frame: true, 39. items: [{ xtype: "button", frame: true, text: "我是登录成功后窗体的一个按钮"}] 40. }); 41. win.hide(); //登录窗体隐藏 42. winLoginSuccess.show(); //显示登录成功后的窗体 43. 44. } 45. //登录窗体 46. var win = new Ext.Window({ 47. title: "登录窗体", 48. minimizable: true, //最小化 49. maximizable: true, //最大化 50. width: 240, 51. height: 186, 52. frame: true, 53. items: [loginPanel], 54. buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}] 55. }); 56. //最小化事件 57. win.minimize = function() { 58. // this.hide(); 59. Ext.MessageBox.confirm("提示", "是否要最小化", minWindow); 60. function minWindow(btn) { 61. if (btn == "yes") { 62. Ext.Msg.alert("提示", "确定最小化么", function() { alert("成功最小化"); }); 63. } 64. } 65. } 66. win.show(); //显示窗体 67. //验证用户登录信息(连接数据库) 68. function CheckLogin() { 69. var userName = Ext.getCmp("userName").getValue(); //用户名 70. var userPass = Ext.getCmp("userPass").getValue(); //密 码 71. if (Ext.util.Format.trim(userName) == "" || Ext.util.Format.trim(userPass) == "") {//用户名和密码不能为空 72. Ext.Msg.alert("提示", "用户名或密码不能为空"); 73. return; 74. } 75. Ext.Ajax.request({ 76. url: "Handler2.ashx?ParamUserName=" + userName + "&ParamUserPass=" + userPass, //将用户名和密码传送到url 77. method: "get", 78. //params: { ParamUserName: userName, ParamUserPass: userPass }, 79. success: function(response) { 80. var getData = response.responseText; //获取服务器数据 81. if (getData == "ok") { 82. loginSuccess(); //登录成功了 83. } else { 84. Ext.Msg.alert("警告","登录失败！"); 85. } 86. }, 87. failure: function(response, options) { alert("失败"); } 88. }); 89. } 90. }); 91. </script> 92.</head> 93.<body> 94. <form id="form1" runat="server"> 95. <div> 96. 97. </div> 98. </form> 99.</body> 100.</html>
//Handler2.ashx
01.<%@ WebHandler Language="C#" Class="Handler2" %> 02. 03.using System; 04.using System.Web; 05. 06.public class Handler2 : IHttpHandler { 07. 08. public void ProcessRequest (HttpContext context) { 09. context.Response.ContentType = "text/plain"; 10. string userName = context.Request.QueryString["ParamUserName"]; 11. string userPass = context.Request.QueryString["ParamUserPass"]; 12. /*** 13. * 这期间可以进行连接数据库，进行验证 14. * */ 15. if (userName == "admin" && userPass == "123") 16. { 17. context.Response.Write("ok"); //如果验证成功则返回ok 18. } 19. else { 20. context.Response.Write("fail");//如果验证失败则返回fail 21. } 22. context.Response.End(); 23. } 24. 25. public bool IsReusable { 26. get { 27. return false; 28. } 29. } 30. 31.}
预览效果如下：
