EXT-JS 6演示样例程序－Login演示样例程序

1.        用Sencha Cmd生成应用程序模版

sencha -sdk /path/to/ExtSDK generate app -classic TutorialApp./TutorialApp

2.        创建Login View组件

在./TutorialApp的“app/view/”目录下，有缺省的main目录，这个目录包括了文件Main.js, MainController.js,和 MainModel.js。

在“app/view/”目录下创建一个目录“login”，在“login”目录下，新建两个文件
Login.js和LoginController.js。

3.        从“{appRoot}/app.js”中移除mainView。

4.        创建Login窗体。文件 “{appRoot}/app/view/login/Login.js” 的内容例如以下：

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.        添加Login逻辑，“{appRoot}/app/view/login/LoginController.js ”文件的内容例如以下：

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

extend: 'Ext.app.ViewController',

alias: 'controller.login',

onLoginClick: function() {

// This would be 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.        在Application.js中添加Launch逻辑。Application.js文件例如以下：

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 that 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 has an update,reload?

',

function (choice) {

if (choice === 'yes') {

window.location.reload();

}

}

);

}

});

7.        添加Viewport Plugin和Logoutbutton，“ {appRoot}/app/view/main/Main.js”文件例如以下：

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.        添加main逻辑。 “{appRoot}/app/view/main/MainController.js”文件例如以下：

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

extend: 'Ext.app.ViewController',

alias: 'controller.main',

onItemSelected: function (sender, record) {

Ext.Msg.confirm('Confirm', 'Are 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'

});

}

});