Extjs4开发笔记(四)——实现登录功能

上篇文章介绍了如何实现菜单功能（点击查看），但是有个问题，就是管理系统必须是登录后才会显示菜单，而且菜单还要实现不同权限有不同的菜单项，本文将实现这个功能。

首先，将server/MenuLoader.asp修改，增加管理员验证功能。即

If Session("Manage") <> "" Then
'显示菜单项
End If

 

这时，重新打开页面，由于有了基本的管理员验证，菜单不显示了。

 

接下来，开始制作登录，在view文件夹下建立Login.js，checkcode.js，其中Login.js实现登录功能，有用户名、密码和验证码，验证码的实现，就是checkcode.js,由于篇幅问题，checkcode.js请查看本站另一篇文章， ExtJS4学习笔记(十)---ExtJS4图片验证码的实现。

主要是Login.js：

Ext.define(SMS.view.Login',{
     extend:'Ext.window.Window',
     alias: 'widget.loginForm',
     requires: ['Ext.form.*','SMS.view.CheckCode'],
     initComponent:function(){
         var checkcode = Ext.create('SMS.view.CheckCode',{
             cls : 'key',
             fieldLabel : '验证码',
             name : 'CheckCode',
             id : 'CheckCode',
             allowBlank : false,
             isLoader:true,
             blankText : '验证码不能为空',
             codeUrl: '/include/checkCode.asp',
            width : 160
        })
         var form = Ext.widget('form',{
             border: false,
            bodyPadding: 10,
            fieldDefaults: {
                 labelAlign: 'left',
                labelWidth: 55,
                 labelStyle: 'font-weight:bold'
            },
            defaults: {
                 margins: '0 0 10 0'
            },
            items:[{
                 xtype: 'textfield',
                 fieldLabel: '用户名',
                 blankText : '用户名不能为空',
                 name:'UserName',
                 id:'UserName',
                 allowBlank: false,
                width:240
            },{
                 xtype: 'textfield',
                 fieldLabel: '密   码',
                 allowBlank: false,
                 blankText : '密码不能为空',
                 name:'PassWord',
                 id:'PassWord',
                width:240,
                 inputType : 'password'
            },checkcode],
            buttons:[{
                 text:'登录',
                 handler:function(){
                     var form = this.up('form').getForm();
                     var win = this.up('window');
                     if(form.isValid()){
                        form.submit({
                             clientValidation: true,
                             waitMsg:'请稍后',
                             waitTitle:'正在验证登录',
                             url:'/server/checklogin.asp',
                             success: function(form, action) {
                                 //登录成功后。
                                 //隐藏登录窗口，并重新加载菜单 ?? ?? ?? ??
                                win.hide();
                                 Ext.getCmp('SystemMenus').store.load();

                            },
                             failure: function(form, action) {
                                Ext.MessageBox.show({
                                    width:150,
                                     title:"登录失败",
                                    buttons: Ext.MessageBox.OK,
                                    msg:action.result.msg
                                })
                            }
                        });
                    }
                }
            }]
        })
         Ext.apply(this,{
            height: 160,
            width: 280,
             title: '用户登陆',
             closeAction: 'hide',
             closable : false,
             iconCls: 'win',
             layout: 'fit',
             modal : true,
             plain : true,
             resizable: false,
            items:form
        });
         this.callParent(arguments);
    }
});

最终效果：

 

 

修改controller目录下的Main.js:

Ext.define(SMS.controller.Main',{
     extend: 'Ext.app.Controller',
     requires:['SMS.view.Login'],

     onLaunch : function(){
         var win;
         if(!win){
             win = Ext.create('SMS.view.Login').show();
        }
    }
})

这时，当页面加载的时候，会显示登录窗口，而登录成功后， 会隐藏登录窗口并加载菜单。最后附上登录成功后页面效果。