Extjs6（二）——用extjs6.0寫一個系統登錄及注銷

 

本文基於ext-6.0.0

一、寫login頁

　　1、在view文件夾中創建login文件夾，在login中創建文件login.js和loginController.js(login.js放在classic/view/login，loginController.js放在app/view/login)

　　2、在app.js中禁用  mainView: 'Learning.view.main.Main'

　　

 

　　3、在login.js中寫頁面

　　　　①創建窗口  ②寫依賴、配置  ③寫登錄的表單和按鈕

Ext.define('FirstTest.view.login.login', {
    extend: 'Ext.window.Window',
    xtype: 'login',

    requires: [
        'Ext.form.Panel',
        'FirstTest.view.login.loginController'
    ],

    controller:'login',

    bodyPadding: 10,
    title:'用戶登錄',

    closable:false,//窗口是否可關閉
    autoShow:true,//windows默認是隱藏，要設置為顯示

    items: {
        xtype:'form',
        reference: 'form',
        items: [{
            xtype:'textfield',
            name: 'username',
            fieldLabel: '用戶名',
            allowBlank: false
        },{
            xtype:'textfield',
            name: 'password',
            fieldLabel: '密碼',
            allowBlank: false
        }],
        buttons: [{
            text:'登錄',
            formBind: true,//按鈕是否可用取決於form
            listeners:{
                click: 'onLoginClick'
            }
        }]
    }
});

　　4、在loginController.js中寫登錄按鈕的onLoginClick事件

　　　　①在localStorage中記錄登錄狀態（寫入TutorialLoggedIn：true）  ②destroy登錄頁  ③create首頁

Ext.define('FirstTest.view.login.loginController',{
    extend:'Ext.app.ViewController',
    alias:'controller.login',
    onLoginClick: function() {

        // Set the localStorage value to true
        localStorage.setItem("TutorialLoggedIn", true);

        // Remove Login Window
        this.getView().destroy();

        // Add the main view to the viewport
        Ext.create({
            xtype: 'app-main'
        });

    }
})

 

　　5、添加啟動邏輯到Application.js（app/Application.js）

　　①判斷是否登錄（通過判斷localStorage中的TutorialLoggedIn是否存在），若登錄則打開首頁，否則打開登錄頁

Ext.define('FirstTest.Application', {
    extend: 'Ext.app.Application',
    
    name: 'FirstTest',

    stores: [
        // TODO: add global / shared stores here
    ],

    views: [
        'FirstTest.view.login.login',
        'FirstTest.view.main.Main'
    ],
    
    launch: function () {
        // TODO - Launch the application

        var loggedIn;

        // Check to see the current value of the localStorage key
        loggedIn = localStorage.getItem("TutorialLoggedIn");

        // This ternary operator determines the value of the TutorialLoggedIn key.
        // If TutorialLoggedIn isn't true, we display the login window,
        // otherwise, we display the main view
        Ext.create({
            xtype: loggedIn ? 'app-main' : 'login'
        });
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

　　

　　6、在main.js中添加Viewport插件

plugins: 'viewport',

　　 這個不加，登錄后就是一片空白。

----------------------------------------到這里，整個登錄就寫好啦。下面寫一下怎么注銷。----------------------------------------------

二、注銷

　　1、寫一個注銷按鈕

{
    xtype:'button',
    text:'注銷',
    iconCls:'x-fa fa-power-off',
    handler: 'onClickButton'
}

　　2、在MainController.js中寫注銷的方法onClickButton

  onClickButton: function () {
        // Remove the localStorage key/value
        localStorage.removeItem('TutorialLoggedIn');

        // Remove Main View
        this.getView().destroy();

        // Add the Login Window
        Ext.create({
            xtype: 'login'
        });
    },

 

到此，登錄注銷就都寫好了。