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

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

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

 

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

 

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

 

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

主要是Login.js：

 

1. Ext.define(SMS.view.Login',{
2.     extend:'Ext.window.Window',
3.     alias: 'widget.loginForm',
4.     requires: ['Ext.form.*','SMS.view.CheckCode'],
5.     initComponent:function(){
6.         var checkcode = Ext.create('SMS.view.CheckCode',{
7.             cls : 'key',
8.             fieldLabel : '验证码',
9.             name : 'CheckCode',
10.             id : 'CheckCode',
11.             allowBlank : false,
12.             isLoader:true,
13.             blankText : '验证码不能为空',
14.             codeUrl: '/include/checkCode.asp',
15.             width : 160
16.         })
17.         var form = Ext.widget('form',{
18.             border: false,
19.             bodyPadding: 10,
20.             fieldDefaults: {
21.                 labelAlign: 'left',
22.                 labelWidth: 55,
23.                 labelStyle: 'font-weight:bold'
24.             },
25.             defaults: {
26.                 margins: '0 0 10 0'
27.             },
28.             items:[{
29.                 xtype: 'textfield',
30.                 fieldLabel: '用户名',
31.                 blankText : '用户名不能为空',
32.                 name:'UserName',
33.                 id:'UserName',
34.                 allowBlank: false,
35.                 width:240
36.             },{
37.                 xtype: 'textfield',
38.                 fieldLabel: '密   码',
39.                 allowBlank: false,
40.                 blankText : '密码不能为空',
41.                 name:'PassWord',
42.                 id:'PassWord',
43.                 width:240,
44.                 inputType : 'password' 
45.             },checkcode],
46.             buttons:[{
47.                 text:'登录',
48.                 handler:function(){
49.                     var form = this.up('form').getForm();
50.                     var win = this.up('window');
51.                     if(form.isValid()){
52.                         form.submit({
53.                             clientValidation: true,
54.                             waitMsg:'请稍后',
55.                             waitTitle:'正在验证登录',
56.                             url:'/server/checklogin.asp',
57.                             success: function(form, action) {
58.                                 //登录成功后。
59.                                 //隐藏登录窗口，并重新加载菜单

    ??

    ??

    ??

    ??

60.                                 win.hide();
61.                                 Ext.getCmp('SystemMenus').store.load();
62.                                 
63.                             },
64.                             failure: function(form, action) {
65.                                 Ext.MessageBox.show({
66.                                     width:150,
67.                                     title:"登录失败",
68.                                     buttons: Ext.MessageBox.OK,
69.                                     msg:action.result.msg
70.                                 })
71.                             }
72.                         });
73.                     }
74.                 }
75.             }]
76.         })
77.         Ext.apply(this,{
78.             height: 160,
79.             width: 280,
80.             title: '用户登陆',
81.             closeAction: 'hide',
82.             closable : false, 
83.             iconCls: 'win',
84.             layout: 'fit',
85.             modal : true, 
86.             plain : true,
87.             resizable: false,
88.             items:form
89.         });
90.         this.callParent(arguments);
91.     }
92. });

最终效果：

 

 

修改controller目录下的Main.js:

 

1. Ext.define(SMS.controller.Main',{
2.     extend: 'Ext.app.Controller',
3.     requires:['SMS.view.Login'],
4.     
5.     onLaunch : function(){
6.         var win;
7.         if(!win){
8.             win = Ext.create('SMS.view.Login').show();
9.         }
10.     }
11. })

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