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();
- ????????}
- ????}
- })
这时，当页面加载的时候，会显示登录窗口，而登录成功后，?会隐藏登录窗口并加载菜单。最后附上登录成功后页面效果。
