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

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