Extjs6 学习(二) - 一个简单的系统登录与注销

一.建立登录页面

1.执行 sencha generate view login.Login, 这个命令可以在view文件夹建立login文件夹，并分别创建了Login.js、LoginController.js、LoginModel.js。

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

3.编写Login.js (创建窗口、写依赖配置、表单)

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

    requires: [
        'Ext.form.Panel',
        'MyApp.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中记录登录状态、destroy登录页、create首页）

Ext.define('MyApp.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 (判断登录状态)

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    name: 'MyApp',

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

    views: [
        'MyApp.view.login.Login',
        'MyApp.view.main.Main'
    ],

    launch: function () {
        // TODO - Launch the application

        var loggedIn;
        
        loggedIn = localStorage.getItem("TutorialLoggedIn");
       
        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插件

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
    plugins: 'viewport',

二.注销

1.添加注销按钮

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

2.在MainController.js中添加注销的方法

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

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

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