1, Set up login page

1. Execute sencha generate view login.Login. This command can create a login folder in the view folder, and create Login.js, LoginController.js and LoginModel.js respectively.

2. Disable main view in app.js: 'myapp. View. Main. Main'

3. Write Login.js (create window, write dependency configuration, form)

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:'User login',

    closable:false,//Whether the window can be closed
    autoShow:true,//windows is hidden by default, to be set to display

    items: {
        xtype:'form',
        reference: 'form',
        items: [{
            xtype:'textfield',
            name: 'username',
            fieldLabel: 'User name',
            allowBlank: false
        },{
            xtype:'textfield',
            name: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }],
        buttons: [{
            text:'Sign in',
            formBind: true,//Button availability depends on form
            listeners:{
                click: 'onLoginClick'
            }
        }]
    }
});

4. Write the onLoginClick event of the login button in LoginController.js (record the login status, destroy login page and create homepage in localStorage)

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. Add startup logic to Application.js (judge login status)

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. Add the Viewport plug-in in main.js

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

Two. Write off

1. Add logout button

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

2. Add the method of logout in 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'
        });
    },