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

最新推荐文章于 2017-11-21 01:29:00 发布

sandykwx

最新推荐文章于 2017-11-21 01:29:00 发布

阅读量381

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

首先，将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();
  }
 }
})

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