用Extjs做登录

index.html

<div id="north-div"><a id="login" href="#">Login</a></div>

login.js

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif'; //替换默认的空白图片
    Ext.QuickTips.init();  // 初始化鼠标停留时的显示框，这里用不上
    // 点击登录时触发的事件
    onClickLogin = function() {
        var loginUrl = '../../login.do'; // 登录请求的url
        // 这里Login的Panel分为两部分，logoPanel和formPanel
        // 创建logoPanel对象
        var logoPanel = new Ext.Panel( {
            baseCls : 'x-plain',
            html : 'Here is your logo'
        });
        // 创建formPanel对象
        var formPanel = new Ext.form.FormPanel( {
            bodyStyle : 'padding:35px 25px 0',
            baseCls : 'x-plain',
            defaults : {
                width : 200
            },
            defaultType : 'textfield',
            frame : false,
            id : 'login-form',
            // form面板上的组件
            items : [ {
                fieldLabel : 'User Name',
                name : 'name'
            }, {
                fieldLabel : 'Password',
                inputType : 'password',
                name : 'password'
            }],
            labelWidth : 120,
            region : 'center',
            url : loginUrl
        });
        // 创建window对象，用来装置以上两个面板，使login显示在一个window上
        var win = new Ext.Window( {
            // window上的按钮，按钮时独立的，也可以设置在formPanel里
            buttons : [ {
                handler : function() { // 按钮login触发的事件
                    form.submit( {
                        waitMsg : 'Please Wait',
                        reset : true,
                        success : this.Success, // 登录成功的时候执行
                        fail : this.Fail,  // 登录失败的时候执行
                        scope : onClickLogin // 这里是为了指定this的范围
                    });
                },
                scope : onClickLogin,
                text : 'LOGIN'
            }, {
                handler : function() { // 按钮cancel触发的事件
                    win.hide();
                },
                scope : onClickLogin,
                text : 'CANCEL'
            }],
            buttonAlign : 'right',
            closable : false,
            draggable : true,
            height : 200,
            id : 'login-win',
            layout : 'border',
            plain : true,
            // window上的组件
            items : [logoPanel, formPanel],
            title : 'Login',
            width : 400
        });
        // 取得表单，参考login按钮触发的事件
        form = formPanel.getForm();

        // 显示window
        win.show();

        // return里的为onClickLogin的共有函数
        return {
            Success : function(f, a) {
                if (a && a.result) { //a表示action，a.result表示action返回的结果数据
                    win.destroy(true);
                    // setCookie
                    // set window.location
                }
            },
            Fail : function(f, a) {
                Ext.Msg.alert('Login failed');
            }
        };
    };
    // 设置login事件
    Ext.get('login').on('click', onClickLogin);
});