欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-25 09:48:49
...

一.建立登录页面

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'
        });
    },