EXTJS学习笔记：类似于Window的登录窗体

EXTJS写的一个类似于Window的登录窗体，可以实现按回车直接运行确定按钮事件，用户名与密码空值验证等功能，通过异步实现登录验证等功能。上下二个Panel作为FromPanel的Items，组合起来实现界面效果如下图：


以下是源代码：

//用户名和密码验证
function LoginCheck()
{
    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;
    }

    var loginReVal;
    try {
        loginReVal = Login.IsRight(userName, Password).value;
    }
    catch (e) {

        Ext.Msg.alert(e.Message);
    }
   
    if(loginReVal==0)//用户名或密码错误
    {
        Ext.Msg.alert("警告", "用户名或密码不正确!");
       return;
    }
    else if(loginReVal==2)//正常帐号
    {
        window.location.href='Index.aspx';
    }
    else if(loginReVal==1)//被禁用帐号
    {
        Ext.Msg.alert("警告", "对不起，您的帐号已被禁用！");
        return;
    }
    else//非法帐号
    {
        Ext.Msg.alert("警告","非法帐号");
        return;
    }
}

 

   
function LoginForm() {

    var leftPanel = new Ext.Panel({
    id: "leftPanel", bodyStyle: "padding:20px;background-color:Red;background-image: url(Images/loginbg.gif);", height: 98
    });

    var rightPanel = new Ext.Panel({
        id: "rightPanel",
        labelPad: 0,
        labelWidth: 60,
        bodyStyle: "padding-left:120px;padding-top:30px",
        layout: "form",
        items: [
        { xtype: "field", id: "userName", fieldLabel: "用户名", width: 150, emptyText: "用户名" },
        { xtype: "field", id: "password", fieldLabel: "密   码", inputType: "password", iconCls: "password", emptyText: "密码", width: 150 }
        ],
        buttons: [
        { xtype: "button", text: "确定", pressed: true, handler: validatorData }, /*pressed表示按钮是否按下，默认为false*/
        {xtype: "button", text: "取消", handler: function() { loginWindow.close(); } }/*点击取消关闭Window,也可以调用loginWindow.hide()隐藏这个Window*/
        ],
       buttonAlign: "center"   

    });

    var loginPanel = new Ext.form.FormPanel({
        id: "loginPanel",
        height: 300,
        frame: true,
        layout: "column",
        items:
         [
            leftPanel, rightPanel
         ]
    });
    var loginWindow;
    if (!loginWindow) {
        loginWindow = new Ext.Window({
            id: "loginWindow",
            title: "管理系统---登陆窗口",
            width: 500,//230, //Window宽度
            height: 300,//137, //Window高度
            resizable: false, /*是否可手动调整Window大小，默认为true*/
            closable: true, //关闭按钮，默认为true
            items: [leftPanel, loginPanel]

        });
    }

    loginWindow.show();
    //按回车时调用确定事件
    var map = new Ext.KeyMap(loginWindow.getEl(), {
        key: 13, //回车的键盘key值
        fn: validatorData    //确定事件   
    });
    //确定事件
    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({
            url: "URL/ValidateCode.aspx", //登录处理页面
            params: { ParamUserName: userName, ParamPassword: Password }, //参数
            success: function(response, option) {
            var obj = Ext.util.JSON.decode(response.responseText); /*decode将json字符串转换成对象;(对应的是encode将对象转换成json字符串)*/
                if (obj.success == true) {
                    window.location.href = 'Index.aspx';
                }
                else {
                    Ext.Msg.alert("登录失败", "登录失败！");
                }
            },
            failure: function() {
                Ext.Msg.alert("登录失败", "登录失败！");
            }
        });

    }
}

Ext.onReady(LoginForm);

注：Images/loginbg.gif从 这里下载
源代码注释比较详细，在些不详细介绍了。

转载于:https://www.cnblogs.com/chhuic/archive/2009/10/11/1580874.html