Write a system login and logout with extjs6.0

This article is based on ext-6.0.0

First, using Sencha cmd to build a ExtJS small project

First, you need a command-line tool. Enter the directory where the ExtJS is located .

Then, enter:sencha-sdk [ExtJs6.0 folder address] Generate app [project name] [Project Path]　　　　　　

Example: SENCHA-SDK ext-6.0.0 generate app app MyApp

(note): You can also add --classic or --modern to build a PC or WAP standalone project

Second, open in the browser

Command line input:Sencha app Watch

Third, start to write the login page

1, Create the Login folder in the View folder, create files in login login.js and Logincontroller.js(login.js placed in Classic/view/login, Logincontroller.js placed in App/view/login)

　　2. disable MainViewin app.js: ' FirstTest.view.main.Main '

3. Write the page in Login.js

① Create window ② write dependent, configure ③ Write login forms and buttons

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:' User Login ', closable:false,//whether the window can be closedAutoShow:true,//windows is hidden by default, to be set to displayitems: {xtype:' Form ', reference:' Form ', items: [{xtype:' TextField ', Name:' Username ', Fieldlabel:' User name ', Allowblank:false},{xtype:' TextField ', Name:' Password ', Fieldlabel:Password, Allowblank:false}], buttons: [{text:Login, Formbind:true,//whether the button is available depends on the formlisteners:{Click:' Onloginclick '            }        }]    }});

4, the Onloginclick event that writes the login button in Logincontroller.js

① Record login status in Localstorage (write tutorialloggedin:true) ②destroy login Page ③create Home

Ext.define (' FirstTest.view.login.loginController ', {extend:' Ext.app.ViewController ', alias:' Controller.login ', Onloginclick:function() {        //Set the Localstorage value to TrueLocalstorage.setitem ("Tutorialloggedin",true); //Remove Login Window         This. GetView (). Destroy (); //ADD The main view to the viewportext.create ({xtype:' App-main '        }); }})

5. Add boot logic to Application.js (app/application.js)

① determine whether to log in (by judging the existence of localstorage in the Tutorialloggedin), if the login to open the first page, otherwise open the login

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        varLoggedIn; //Check to see the current value of the localstorage keyLoggedIn = 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 viewext.create ({Xtype:loggedin? ' App-main ': ' Login '        }); }, Onappupdate:function() {Ext.Msg.confirm (' Application update ', ' This application have an Update, reload? ',            function(choice) {if(Choice = = = ' Yes ') {window.location.reload ();    }            }        ); }});

　　

6. Add Viewport plugin in Main.js

Plugins: ' Viewport ',

This does not add, after login is a blank.

-------------------------------------------------- Here, the entire login is written. Write down how to log out. ---------------------------------------------------------------------------------------------------------- ---

Iv. Cancellation of

1. Write a logout button

{    xtype:' button ',    text:' logout ',    iconcls:' x-fa fa-power-off ',    ' OnClickButton '}

2, the method of write-off 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 ({            ' login '        });    

Here, log-off is all written.

Write a system login and logout with extjs6.0