EXT-JS 6 Sample Program-login sample Program

1. Generate the application template with Sencha cmd

SENCHA-SDK/PATH/TO/EXTSDK Generate App-classic Tutorialapp./tutorialapp

2. Create the Login View component

In the./tutorialapp "app/view/" folder, there is the default main folder, which contains the file main.js, maincontroller.js, and mainmodel.js.

Create a folder "login"under the "app/view/" folder, andtwo new files in the "Login" folder Login.js and logincontroller.js.

3. Remove Mainview from "{approot}/app.js".

4. Create the login window, the contents of the file "{approot}/app/view/login/login.js" are as follows:

Ext.define (' TutorialApp.view.login.Login ', {

Extend: ' Ext.window.Window ',

Xtype: ' Login ',

Requires: [

' TutorialApp.view.login.LoginController ',

' Ext.form.Panel '

],

Controller: ' Login ',

Bodypadding:10,

Title: ' Login Window ',

Closable:false,

Autoshow:true,

Items: {

Xtype: ' Form ',

Reference: ' Form ',

Items: [{

Xtype: ' TextField ',

Name: ' username ',

Fieldlabel: ' Username ',

Allowblank:false

}, {

Xtype: ' TextField ',

Name: ' Password ',

InputType: ' Password ',

Fieldlabel: ' Password ',

Allowblank:false

}, {

Xtype: ' Displayfield ',

Hideemptylabel:false,

Value: ' Enter any non-blank password '

}],

Buttons: [{

Text: ' Login ',

Formbind:true,

Listeners: {

Click: ' Onloginclick '

}

}]

}

});

5. Add the login logic, " {appRoot}/app/view/login/LoginController.js " The contents of the file are as follows:

Ext.define (' TutorialApp.view.login.LoginController ', {

Extend: ' Ext.app.ViewController ',

Alias: ' Controller.login ',

Onloginclick:function () {

This would is the ideal location to verify the user ' s credentials via

A server-side lookup. We ' ll just move forward for the sake of thisexample.

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 '

});

}

});

6. Add launch logic in Application.js, Application.js file as follows:

Ext.define (' Tutorialapp.application ', {

Extend: ' Ext.app.Application ',

Name: ' Tutorialapp ',

Stores: [

Todo:add global/shared Stores here

],

Views: [

' TutorialApp.view.login.Login ',

' TutorialApp.view.main.Main '

],

Launch:function () {

It ' s important to note the this type of application could use

Any type of storage, i.e, cookies,localstorage, etc.

var loggedIn;

Check to see the current value of the Localstorage key

LoggedIn = Localstorage.getitem ("Tutorialloggedin");

This ternary operator determines the value of the Tutorialloggedinkey.

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 have an update,reload? ',

function (choice) {

if (choice = = = ' Yes ') {

Window.location.reload ();

}

}

);

}

});

7. Add viewport plugin and logout button, " {appRoot}/app/view/main/Main.js " file as follows:

Ext.define (' TutorialApp.view.main.Main ', {

Extend: ' Ext.tab.Panel ',

Xtype: ' App-main ',

Requires: [

' Ext.plugin.Viewport ',

' Ext.window.MessageBox ',

' TutorialApp.view.main.MainController ',

' TutorialApp.view.main.MainModel ',

' TutorialApp.view.main.List '

],

Controller: ' Main ',

ViewModel: ' Main ',

Plugins: ' Viewport ',

UI: ' Navigation ',

Tabbarheaderposition:1,

titlerotation:0,

tabrotation:0,

Header: {

Layout: {

Align: ' Stretchmax '

},

Title: {

Bind: {

Text: ' {name} '

},

flex:0

},

Iconcls: ' Fa-th-list ',

Items: [{

Xtype: ' button ',

Text: ' Logout ',

Margin: ' 10 0 ',

Handler: ' OnClickButton '

}]

},

TabBar: {

Flex:1,

Layout: {

Align: ' stretch ',

Overflowhandler: ' None '

}

},

Responsiveconfig: {

Tall: {

Headerposition: ' Top '

},

Wide: {

Headerposition: ' Left '

}

},

Defaults: {

BODYPADDING:20,

Tabconfig: {

Plugins: ' Responsive ',

Responsiveconfig: {

Wide: {

Iconalign: ' Left ',

TextAlign: ' Left '

},

Tall: {

Iconalign: ' Top ',

TextAlign: ' Center ',

width:120

}

}

}

},

Items: [{

Title: ' Home ',

Iconcls: ' Fa-home ',

The following grid shares a store with the classic version ' s grid aswell!

Items: [{

Xtype: ' Mainlist '

}]

}, {

Title: ' Users ',

Iconcls: ' Fa-user ',

Bind: {

HTML: ' {loremipsum} '

}

},{

Title: ' Groups ',

Iconcls: ' Fa-users ',

Bind: {

HTML: ' {loremipsum} '

}

}, {

Title: ' Settings ',

Iconcls: ' Fa-cog ',

Bind: {

HTML: ' {loremipsum} '

}

}]

});

8. Add the main logic , "{approot}/app/view/main/maincontroller.js" file as follows:

Ext.define (' TutorialApp.view.main.MainController ', {

Extend: ' Ext.app.ViewController ',

Alias: ' Controller.main ',

Onitemselected:function (sender, record) {

Ext.Msg.confirm (' Confirm ', ' is you sure? ', ' onconfirm ', this);

},

Onconfirm:function (choice) {

if (choice = = = ' Yes ') {

//

}

},

Onclickbutton:function () {

Remove the Localstorage Key/value

Localstorage.removeitem (' Tutorialloggedin ');

Remove Main View

This.getview (). Destroy ();

Add the Login Window

Ext.create ({

Xtype: ' Login '

});

}

});

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

EXT-JS 6 Sample Program-login sample Program