ExtJs-表单提交登陆

时间：2010-08-17 来源：忧忧夏天

　　上一篇简单做了一个用ext写的登陆界面，今天来实现登陆效果，主要是回顾下ext中表单提交方法的使用。

1 在子类中添加单击提交事件

代码

    //登陆按钮单击事件
    loginFun: function() {
        var f = Ext.getCmp("loginForm");
        
        //表单验证
        if (f.form.isValid) {
            f.form.submit({
                waitTitle: "请稍候",
                waitMsg: '正在登陆...',
                url: 'http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin',
                method: 'POST',
                success: function(form, action) {
                    window.location = 'Main.htm'
                },
                failure: function(form, action) {
                    if (action.result == undefined) {
                        Ext.Msg.alert('提示', "系统出错...请联系管理员");
                        form.items.items[1].reset();
                    }
                    else {
                        Ext.Msg.alert('提示', action.result.rspText);
                        form.items.items[1].reset();
                    }
                }
            });
        }
    },

2 在初始化中给登陆按钮绑定事件

代码

    //初始化
    init: function() {
        this.LoginWin.show();

        Ext.getCmp("loginBtn").on('click', this.loginFun);

        this.loadMask = new Ext.LoadMask(this.LoginWin.body, { msg: "页面加载中……" });
    }

3.关于ext.extend

　　定义：function extend(function sb,function sp,Object overrides)

　　简单解释：第一个参数--子类

　　　　　　　第二个参数--父类

　　　　　　　第三个参数--重写对象

　　例子中子类为 XQH.ExtJs.Frame.app

　　　　　　　父类 Ext.util.Observable（一个抽象基类（Abstract base class），为事件机制的管理提供一个公共接口。）

　　更详细介绍请看（转）http://wangyu.javaeye.com/blog/210849

4.url: 'http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin'

代码

public void UserLogin()
    {
        StringBuilder jsonData = new StringBuilder();
        
        bool success = false;
        string rspText = string.Empty;
        
        if (Request["LoginName"] != null && Request["LoginPsd"] != null)
        {
            string loginName = Request["LoginName"].Trim();
            string loginPsd = Request["LoginPsd"].Trim();

            XUser userEnity = userAccess.GetUserByName(loginName);

            if (userEnity != null)
            {
                if (userEnity.LoginPsd == loginPsd)
                {
                    success = true;
                    Session["UserEnity"] = userEnity;
                }
                else
                {
                    success = false;
                    rspText = "账号或密码错误";
                }
            }
            else
            {
                success = false;
                rspText = "账号不存在,请联系管理员";
            }

            JsonConvert<XUser> json = new JsonConvert<XUser>();
            jsonData = json.ToRequest(success, rspText, userEnity);
        }

        Response.Write(jsonData);
        Response.End();
    }

注意：返回的数据必须是Json格式的 success,rspText为返回的标记在js里通过action.result.success里调用

今天先到这里，下次来实现后台界面框架。