ExtJS学习之——实现用户登录

因项目中用到Ext Js，一无所知的我开始学习这个功能强大的js前端框架，将平时的code记录在博客里，以备日后查看，也给有需要的人，如有不当，请大家不吝赐教。

Ext.onReady(function() {
            Ext.QuickTips.init();

            var banner = {
                xtype : 'box',
                autoEl : {
                    html : '<div >' + '  <img src="'
                            + './gzgx/images/logo_30x30.png" />' + '  <span>'
                            + '欢迎您登录XX查询系统！' + '<span>' + '</div>'
                },
                style : ' font-size:1.5em; 100%; text-align:center; padding:15px; '
            };//title标题
            
            var subEnterLister = {
                specialkey : function(field, e) {
                    if (e.getKey() == e.ENTER) {
                        submitForm();
                    }
                }
            };//定义键盘Enter事件
            
            var userName = {
                id : 'userName',
                name : 'userName',
                xtype : 'textfield',
                fieldLabel : '用户名',
                anchor : '90%',
                blankText : '请输入用户名！',
                msgTarget : 'qtip',
                allowBlank : false,
                minLength : 5,
                maxLength : 20,
                minLengthText : '用户名最短5个字符！',
                maxLengthText : '用户名最长20字符！',
                listeners : subEnterLister
            };//用户名
            
            var userPassword = {
                    id:'userPassword',
                    name : 'userPassword',
                    xtype : 'textfield',
                    fieldLabel : '密&nbsp;&nbsp;&nbsp;码',
                    anchor : '90%',
                    allowBlank : false,
                    blankText : '请输入密码！',
                    msgTarget : 'qtip',
                    inputType : 'password',
                    minLength : 5,
                    maxLength : 20,
                    minLengthText : '密码最短6个字符！',
                    maxLengthText : '密码最长20字符！',
                    listeners: subEnterLister
            };//密码框
            
            var checkCode = {
                    xtype : 'textfield',
                    fieldLabel : '验证码',
                    anchor : '55%',
                    id : 'randCode',
                    name : 'randCode',
                    allowBlank : false,
                    minLength : 6,
                    maxLength : 6,
                    blankText : '请输入验证码！',
                    minLengthText : '验证码有误！',
                    maxLengthText : '验证码有误！',
                    msgTarget : 'qtip',
                    listeners: subEnterLister
            };//验证码
            
            var accountFS = {
                xtype : 'fieldset',
                title : '请登录',
                width : 315,
                collapsible : false,
                items : [userName,userPassword,checkCode]
            };//主Fieldset

            var submitForm =function(){
                if(loginForm.getForm().isValid()){
                    loginForm.getEl().mask('登录验证中', 'x-mask-loading');
                    loginForm.getForm().submit({
                        waitTitle:'正在登录',
                        waitMsg:'正在向服务器申请登录验证，请稍后...',
                        success:function(basicform, action){
                            loginForm.getEl().unmask();
                            if (action.result.msg=='success') {
                                document.location='index.jsp';
                            } else {
                                Ext.Msg.alert('登陆错误',action.result.msg,function(){
                                    document.location=location;
                                });
                                
                            }
                        },
                        failure: function(basicform, action) {
                            switch (action.failureType) {
                                case Ext.form.Action.CLIENT_INVALID:
                                    Ext.Msg.alert('Failure', '请输入正确用户信息或验证码！');
                                    break;
                                case Ext.form.Action.CONNECT_FAILURE:
                                    Ext.Msg.alert('连接错误', 'Ajax communication failed');
                                    break;
                                case Ext.form.Action.SERVER_INVALID:
                                   Ext.Msg.alert('验证错误', action.result.msg,function(){
                                       document.location=location;
                                   });
                                   
                            }
                            loginForm.getEl().unmask();
                        }
                    });
                }else{
                    Ext.Msg.alert('提示','登录信息错误,请核对！');
                }
            };
            
            var resetForm = function(){
                loginForm.getForm().reset();
            };

            var loginForm =  new Ext.form.FormPanel({
                    frame : true,
                    border : false,
                    bodyBorder : false,
                    height : 243,
                    padding : 5,
                    labelAlign : 'right',
                    buttonAlign : 'center',
                    url:'userLogin',
                    method:'post',
                    items : [ banner, accountFS ],
                    buttons : [ {
                        text : '登录',
                        handler:submitForm,
                        scope:this
                    }, {
                        text : '重置',
                        handler:resetForm,
                        scope:this
                    } ]
            }); 
            
            var loginWindow = new Ext.Window({
                id:'loginWindow',
                width : 350,
                height : 275,
                border : false,
                modal : true,
                closable:false,
                collapsible:true,
                constrain:true,            //强制在ViewPort中显示
                resizable : false,
                items : [loginForm]
            }).show();

            var bd = Ext.getDom('randCode');
            var bd2 = Ext.get(bd.parentNode);
            bd2.createChild({
                tag : 'img',
                id:'randomPic',
                style:'border:1px solid white;height:18px; 60px;',
                src: 'randomCode',
                align : 'AbsBottom'
            });
            bd2.createChild({
                tag : 'a',
                id:'toNextPic',
                href:'javascript:void(0);',
                html: '换一张',
                align : 'AbsBottom'
            });
            $('#toNextPic').click(function(){
                $('#randomPic').attr({src:"randomCode"});
            });
        });

很简单的一个ExtJS 登录框，用的是3.4版本。