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