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();  } }})

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