Extjs官方api帮助文档: http://docs.sencha.com/extjs/6.2.0/
指南适用于：classic
第1步 - 生成应用程序
借助sencha Cmd 工具链接: https://www.sencha.com/products/sencha-cmd/
sencha -sdk /path/to/ExtSDK generate app -classic TutorialApp ./TutorialApp
注意：为了完整性，以下语句将生成一个modern应用程序：
sencha -sdk /path/to/ExtSDK generate app -modern TutorialApp ./TutorialApp
以下将生成一个通用应用程序：
sencha -sdk ExtSDK的路径 generate app 项目名称 项目的路径classic主要用于pc端的开发，modern用于移动端的开发
我采用的是classic：sencha -sdk D:\extjs\sdk\ext-6.2.0 generate app -classic Demo ./Demo
在E盘下面会生成demo项目，目录结构如下
在demo下打开cmd窗口，执行 sencha app watch命令，运行程序
访问 http://localhost:1841，进入主页
第2步 - 创建登录视图组件
在Demo中app / view文件夹来准备我们的登录功能，创建“app / view / login /”文件夹后，将以下文件添加到所述文件夹：
- Login.js
- LoginController.js
第3步 - 禁用mainView
程序的mainView配置 是一种非常方便的方法，可以通过利用Viewport插件自动加载和实例化“Demo.view.main.Main” 。但是， 在选择初始视图之前，我们有一些操作要在Ext.application的launch()方法中执行。例如，如果用户尚未登录，我们不希望创建主视图。
出于本练习的目的，让我们mainView从“Demo/app.js”中的应用程序配置中删除配置或者注释掉 。
// mainView: 'Demo.view.main.Main'
注意：由于我们已删除mainView，因此刷新应用程序将导致空白页面，因为没有实例化类。
第4步 - 创建登录窗口
接下来，让我们创建一个登录视图。为此，我们将打开空白的“Demo/app/view/login/Login.js”文件并开始定义登录窗口。给它一些子组件。由于这将是一个登录表单，我们将创建一个Form面板作为Window的子项。然后我们将添加两个文本字段、一个提交 按钮和一个重置按钮。
Ext.define('Demo.view.login.Login',{
extend:'Ext.window.Window',
xtype:'login',
requires:[
'Ext.form.Panel',
'Demo.view.login.LoginController'
],
controller:'login',
bodyPadding:10,
title:'用户登录',
closable:false,
autoShow:true,
items:{
xtype:'form',
reference:'form',
items:[{
xtype:'textfield',
name:"username",
fieldLabel:'用户名',
allowBlank:false
},{
xtype:'textfield',
name:'pwd',
inputType:'password',
fieldLabel:'密码',
allowBlank:false
}
],
buttonAlign:'center',
buttons:[{
text:'登录',
formBind:true,
listeners:{
click:'onLoginClick'
}
} , {
text: '重置',
iconCls:'x-fa fa-refresh',
listeners: {
click: 'onReset'
}
}]
}
});
第5步 - 添加登录逻辑
接下来，让我们创建Login控制器，它是一个包含用于处理用户与Login视图交互的逻辑的类。为此，我们将打开空白Demo/app/view/login/LoginController.js文件并开始定义Login窗口的逻辑,该类包含onLoginClick 通过单击登录按钮调用的方法。
Ext.define('Demo.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function() {
//localStorage存储一个变量，用来进行再application.js的launch()方法中判断
localStorage.setItem("DemoLoggedIn", true);
// 获取Login窗口的引用然后 销毁它。
this.getView().destroy();
//使用Ext.create({xtype:'app-main' })实例化“{appRoot}/app/view/main/Main.js”视图。
Ext.create({
xtype: 'app-main' //创建视图
});
},
onReset: function() {
var form = this.lookupReference('form');
form.getForm().reset();
}
});注意： 'app-main'指在我们的Sencha Cmd上生成的“Demo.view.main.Main”类中定义的xtype，该类位于“Demo/app/view/main.Main.js”中。
第6步 - 将启动逻辑添加到Application.js
“Application.js”是应用程序的核心。您可以在“视图”，“存储”和“模型”文件夹的同一级别找到“Application.js”。它提供了一个方便的方法launch，当你的应用程序加载了所有必需的类时，它会触发。以下是本教程的“Application.js”文件的完整代码。
Ext.define('Demo.Application', {
extend: 'Ext.app.Application',
name: 'Demo',
quickTips: false,
platformConfig: {
desktop: {
quickTips: true
}
},
stores: [
],
launch: function () {
//该launch方法是一个函数，在应用程序加载了运行所需的所有内容时执行
var loggedIn;
loggedIn = localStorage.getItem("DemoLoggedIn");
Ext.create({
xtype: loggedIn ? 'login':'app-main'
/**通过三元运算“如果 loggedIn存在（不为
空），让我们加载主视图，否则，加载登录视图”。然后我们使用该Ext.create方法来
实例化三元运算符的结果。
*/
});
},
onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});我们已经描述了需要做什么，但让我们来谈谈这个特定的阵列。出于“Application.js”的目的，我们需要准备应用程序以加载Login或Main视图，具体取决于登录判断的结果。为此，我们必须同时需要“Demo.view.main.Main”和“Demo.view.login.Login”，以便获得任一结果。
第7步 - 添加Viewport插件/注销按钮
您可能还记得，我们mainView在本教程的早期从“Demo/app.js”中删除了配置。由于我们没有定义视口，因此您的主视图将不知道要渲染的位置。我们将通过混合viewport插件来改变它，以便“Demo/app/view/main/Main.js”作为我们的应用程序的视口运行。这样，主视图占用浏览器中所有可用的宽度和高度。就像将以下行添加到“Demo /app/view/main/Main.js”一样简单：plugins : 'viewport'
我们还应该在应用程序的主导航视图中添加一个Logout按钮。我们将它添加到Main Tab面板的标题中，以便可以从应用程序的任何选项卡访问它。我们的注销按钮将click使用onClickButton 我们将在下一节中配置的方法处理事件。
我们生成的Demo/app/view/main/Main.js文件如下所示：
Ext.define('Demo.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'Demo.view.main.MainController',
'Demo.view.main.MainModel',
'Demo.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:'注销',
iconCls:'x-fa fa-power-off',
listeners: {
click: 'onLoginOutClick'
}
}]
},第8步 - 添加主逻辑
我们差不多完成了！现在剩下的就是给用户一些注销应用程序的方法，这DemoLoggedIn将从localStorage中销毁密钥。该逻辑应该在“Demo/app/view/main/MainController.js”文件中进行。我们将该onClickButton方法添加到ViewController以处理注销操作。
这是本教程“MainController.js”的最终定义：
onClickButton: function () {
// Remove the localStorage key/value
localStorage.removeItem('DemoLoggedIn');
// Remove Main View
this.getView().destroy();
// Add the Login Window
Ext.create({
xtype: 'login'
});
}我们不在这里深入研究，因为它基本上与我们的Demo/app/view/login/LoginController.js代码相反 。
总结此功能，onClickButton是由我们生成的“Demo/app/view/main/Main.js”视图中的按钮处理程序调用的函数。一旦click 检测到事件，则采取以下步骤：
-
删除维护用户登录状态的localStorage密钥。
-
销毁当前视图，即Demo.view.main.Main。
-
重新创建登录视图。
您现在应该能够在浏览器中加载应用程序并查看功能完备的登录/注销应用程序。
效果如下：
