EXTJS学习系列提高篇:第四篇作者殷良胜,登陆示例

图片示例

 

Code
//前台显示部分

<form id="form1" runat="server">
    <div><div id="btnShow" style=" text-align:center; padding-top:300px; vertical-align:middle;"></div>
    <script type="text/javascript">
    function LoginDemo()
    {        
        //登陆窗体
        var loginPanel = new Ext.form.FormPanel
        ({
             id:"loginPanel",labelPad:0,labelWidth:40,frame:true,
             items:
             [
                 {xtype:"field",id:"UserName",fieldLabel:"用户名"},
                 {xtype:"field",id:"Password",fieldLabel:"密&nbsp;&nbsp;&nbsp;码"}
             ]         
        });
        var loginWindow;
        if(!loginWindow)
        {
            loginWindow = new Ext.Window
            ({
                 id:"loginWindow",
                 title:"登陆窗口",
                 width:200,
                 height:127, 
                 resizable:false, 
                 closable:false,
                 items:
                 [
                    loginPanel
                 ],
                 buttons:
                 [
                     {xtype:"button",text:"确定",handler:validatorData},
                     {xtype:"button",text:"取消",handler:function(){loginWindow.hide();}}
                 ]
            });
        }
        loginWindow.show();
        document.body.onkeydown = function(){loginWindow.show();};
        //连接数据库
        function validatorData()
        {
            var UserName = Ext.getCmp("UserName").getValue();
            var Password = Ext.getCmp("Password").getValue();
            if(Ext.util.Format.trim(UserName)==""||Ext.util.Format.trim(Password)=="")
            {
                Ext.Msg.alert("警告","请正确输入数据，用户名和密码都不能够为空！");
                return;
            }
            Ext.Ajax.request
            ({
                 http://www.cnblogs.com/mogen_yin/admin/%22ValidatorData.aspx%22,//请求的地址
                 params:{ParamValue:"1",ParamUserName:UserName,ParamPassword:Password},//发送的参数
                 success:function(response,option)
                 {
                     var obj = Ext.util.JSON.decode(response.responseText);//返回的信息
                     if(obj.success==true)
                     {
                         Ext.Msg.alert("好消息","好消息：你登陆成功了！");
                         //清除输入框
                         Ext.getCmp("UserName").setValue("");
                         Ext.getCmp("Password").setValue("");
                         loginWindow.hide();
                     }
                     else
                     {
                         Ext.Msg.alert("坏消息","坏消息：你登陆失败了！");
                     }
                 },
                 failure:function()
                 {
                     Ext.Msg.alert("坏消息","坏消息：你登陆出现异常了！");
                 }
            });
        }
        //显示登陆窗口
        var btnShow = new Ext.Button
        ({
             renderTo:"btnShow",text:"显示登陆窗口",handler:function(){loginWindow.show();}
        });
    }
    Ext.onReady(LoginDemo);    

</script>
    </div>
    </form>

//后台代码部分

protected void Page_Load(object sender, EventArgs e)
    {
        string ParamValue = Request["ParamValue"];
        if (ParamValue == "1")
        {
            string UserName = Request.QueryString["ParamUserName"];
            string Password = Request.QueryString["ParamPassword"];
            //连接数据库
            连接数据库#region 连接数据库 
            /**//*
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = "连接字符串";
            if (conn.State == ConnectionState.Closed)
                conn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = string.Format(" select UserID from 表 where UserName = '{0}' and Password = '{1}'", UserName, Password);
            object obj = cmd.ExecuteScalar();
            if (obj != null)
            {
                if (Convert.ToString(obj) != "")
                {
                    Response.Write("{success:true}");
                }
                else
                {
                    Response.Write("{success:false}");
                }
            }
            else
            {
                Response.Write("{success:false}");
            }
            */
            #endregion 
            Response.Write("{success:true}");
        }
    }