[Ext JS 6 By Example 翻译] 第1章 – 入门指南

转载自：http://www.jeeboot.com/archives/1211.html

前言

本来我是打算自己写一个系列的 ExtJS 6 学习笔记的，因为 ExtJS 6 目前的中文学习资料还很少。google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext js 6 By Example]。这份资料在 PACKT上卖 35.99 刀的，当然了万能的 google 还是帮我下载到了 PDF 文档。大概看了一下，讲的很详细，例子也比较简单，容易理解，现我准备利用工作之余翻译这份文档，为自己学习加深理解，也希望能帮助更多的人学习。

翻译时，我并不会 100% 按照原文照搬，而是可能加上我的理解和我自己的看法，所谓求其上而得其中，求其中而得其下，如果你看到这个文章，也不要以此作为标准，保持你的意见和思想。

正文

现在如果你打算学习 Ext JS 了，那你应该告别使用普通的 JavaScript 了。javascript 是一个伟大，卓越的语言，但是随着 web 应用越来越大，我们的代码也越来越难以维护，这是十分困难并耗费时间的。

普通的 JavaScript 非常的灵活，这有很多优点，同时这样也会带来很多问题，随着你的应用越来越大，参与的人就越来越多，普通的 JavaScript 让 10 个人来写，就会有 10 种不同的风格，往往有些代码只有写代码的当事人知道为什么这么写，如果这个人不再负责这个功能，就会成为后来人的坑。所以在代码上的约束和规范是十分有必要的。这也是为什么我一直喜欢 ExtJS 的原因，ExtJS 写起来代码就像 Java 一样，非常严谨，非常面向对象。缺点就是在前端 JS 库中属于比较重量级，学习曲线相对陡峭。

当涉及到 JavaScript 框架时，有客户端的 JavaScript 框架以及服务端的 JavaScript 框架。Ext JS 就是一个客户端的 JavaScript 框架。

在本章基本上是讲述关于如何使用我们所需的工具来设置开发环境以及Ext JS 的基本介绍。在这一章，我们主要涉及以下几点：

• 使用 Ext JS 的优点
• 对 Ext JS 的介绍
• 安装设置 Sencha Cmd 和 Ext JS
• 使用 SenchaCmd 搭建 Ext JS 应用
• Ext JS 应用的体系结构
• 探索 Sencha Cmd 命令
• 如何调试 Ext JS 应用
• 使用开发工具 IDE

为什么使用 Ext JS?

既然推荐你使用，自然要告诉你使用 Ext JS 都有哪些看得见的好处。现在让我们瞧一瞧，在你的应用里使用 Ext JS 相较普通 JavaScript 有哪些优点。

跨浏览器支持

只要你做 web 开发，你一定解决过浏览器兼容问题，这有多么消耗时间和影响工作进度你一定有体会，你可能会花上几小时甚至几天来解决跨浏览器 bug。你为什么不把这些时间用来关注你的业务功能呢？相反，如果使用 Ext JS 这个 JavaScript 框架，这种事情将由它去考虑，而你可以专注于业务功能。

丰富的 UI 组件

Ext JS 提供了大量丰富的 UI 控件，如 data grid ，tab panels,tree 控件，日期选择工具，图表 等等，Ext JS 作为一站式的前端框架，有很多优秀且实用的控件，尤其是表格对复杂数据展示的支持是其他的 JavaScript 框架不具备的， 这些都能大量节省你的开发时间。

双向数据绑定

双向数据绑定意味着当视图 view 的数据发生变化，你的模型 model 将自动更新。同样的，当你的应用更新这个模型 model，这个数据也将自动传递到 view。

就拿编辑页面来举栗。 当这个页面(view)加载，这时已经渲染了来自模型(model) 的数据到 HTML，并且当用户在页面(view)上更新这个数据，这时候你需要更新你的模型(model)，但如果你使用 Ext JS 将不需要你自己去做这些编程。

JavaScript 的架构模式(MVC/MVVM)

随着越来越多的代码转移到客户端，维护客户端的 JavaScript 代码变的非常困难。通过在客户端使用 MVC (Model View Controller)/MVVM (Model View, View Model)  使维护客户端的 JavaScript 变得更容易，并提高了生产效率。关于 MVC 和 MVVM 架构模式会在本章后面解释。

简化复杂的操作

想象一下使用纯 JavaScript 写一个 AJAX 调用，你需要考虑确保支持所有浏览器，这你可以看一下任何的 JavaScript 框架里进行 AJAX 调用的方法的源码。想象一下使用纯 JavaScript 创建一个复杂的控件，例如 grid ，分页，排序，过滤，分组，可编辑字段等等。Ext JS 不需要你自己来做这些工作。这里其实是废话，没有谁闲的蛋疼重复造轮子。但是其他框架一定没有 Ext JS 这种一站式的支持。

访问 DOM 变得容易

普通的纯 JavaScript 里，你可以访问 DOM，但是这有点复杂。使用 Ext JS 就会很容易查找 DOM。当然使用 jQuery 的人肯定不信服，还能比 jquery 查找 DOM 更方便吗？我也常用 jquery ，这里我可以说 Ext JS 相较 jquery 查找 DOM 不逞多让。

客户端路由

在 web 应用里，URL 映射到 web 页面的路由方式背后有一系列的逻辑。路由可以在服务端也可以在客户端。通常客户端路由都是用单页式应用实现的。Single-Page Application (SPA)。

支持无障碍访问

无障碍访问特性意味着这个应用程序的内容必须是可以方便的让视力受损的人借助辅助设备访问(例如屏幕阅读器)。 而开发一个应用程序能够很好的支持无障碍特性是非常困难的。这里 Ext JS 已经为你做了。

在美国，如果你开发的软件供联邦和州政府职员使用，在绝大多数情况下，你需要确保你的程序是支持无障碍访问特性的。这一点，很少 JavaScript 框架能对无障碍访问特性有较好的支持。而 Ext JS 提供了完美的无障碍访问支持。

        World Wide Web Consortium (W3C)已经创立了一个名为WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 的技术规范。

• WAI-ARIA, 是Web Accessibility Initiative – Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。她主要解决的一个问题:让残障人士能无障碍地访问网页上的动态内容。

这种规范方式使残疾人也能无障碍访问 web 应用。 Ext JS 对此具有良好的支持，并且所有的 控件/部件 都可以支持，不需要你做任何额外的编码。

介绍 Ext JS

Ext JS 作为一个一站式的开发富 UI 应用的框架，它提供支持 MVC,MVVM, 双向绑定，跨浏览器兼容，路由功能，一组广泛的丰富的 UI 组件，图表等等。对于框架中所有的 API ， Ext JS 还拥有一个非常优秀的文档。Ext JS 最初的建立是由 Jack Slocum 开发的，做为 YUI 的一个附加扩展库使用，现在则是成为 Sencha 公司的产品。

在 Ext JS 中，你写的代码基本上就是 JavaScript，因为你不需要写 HTML。Ext JS 附带一组庞大的丰富的 UI 组件，这在你的开发过程中会节约你相当多的时间。

本书中，所有的样例代码和示例项目代码将使用最新的 Ext JS Version 6，但是大多数代码是兼容以前的 Ext JS 5 的。Ext JS 5 和 Ext JS 6 的大多数概念是相同的。所以如果你在使用 Ext JS 5，你仍然可以从这本书中受益不少。但是请记住这本书的代码将不会运行在 Ext JS 5 并且可能需要做一些小修改才能运行在 Ext JS 5。在 Ext JS 6 中最重要的变化是它合并了两个框架：Ext JS 和 Sencha Touch 合并成为了一个框架。Ext JS 6 还带来了一个新的 SASS 编译器叫 Fashion，以及3D 图表的改进等等。

要明白为什么会发生合并 Ext JS 和 Sencha Touch , 我们需要回顾一下。

Sencha Touch 是一个独立的产品，专用于为移动设备和平板电脑创建可支持触摸的应用，它利用硬件加速技术为移动设备提供高性能的 UI 组件。

Ext JS 4 和 Ext JS 5 主要用于开发桌面级的 web 应用。 如果你已经在 Ext JS 5 或 Ext JS 4 创建了用于桌面的 web 应用，这仍然可以在移动设备和平板电脑上运行，但是它将不支持一些特定的触摸功能，并且不能利用硬件加速为移动设备提供高性能 UI 组件。所以为了更好的支持移动设备，Sencha 开发人员被告知要使用 Sencha Touch。

使用 Sencha Touch 有很多优势。 在 Sencha Touch 编写的应用将具备移动平台本地应用一样的外观，并且性能将更好。然而许多开发人员有一个抱怨,因为他们被迫保持两套相同的应用程序的代码库。

尽管 Sencha Touch 和 Ext JS 有很多差异是完全不同的产品，但他们的概念和思想的框架非常相似，如果你会用 Ext JS,那么学习 Sencha Touch 也非常容易。

长期以来,许多 Ext JS 和 Sencha Touch 用户问为什么不把两个产品合二为一使 Ext JS 能够带触摸功能。在 Ext JS 6 中,Sencha 决定将这两个产品合并到一个单一的产品。

现在，在 Ext JS 6 你仍然可以维护一套独立的代码。而要 Sencha Touch 和 Ext JS 6 两者兼存，有些视图的代码你可能需要单独的编写，但是大部分代码都是共享的。

在 Ext JS 6 合并后将两者通用的代码做为核心(两者公用一个核心)，并且引入了一个 toolkit(工具箱) 的概念。toolkit 是一个可视化组件的包，例如 button，panel 等等。Ext JS 6 有两个工具包：classic(古典) 和 modern(现代)。原来的 Ext JS 的可视化组件放在 classic 工具包，原来的 Sencha Touch 的可视化组件则放在 modern 工具包。

在 Ext JS 6 中选择你想使用的 toolkit(工具包)很简单，如果你正在开发的程序只是针对移动设备的，你可以选择 modern，如果你只用于桌面那么你可以选择 classic。默认则是通用的，通用的应用你在桌面端访问 Ext JS 6 应用，就会自动展现 classic 风格，如果用移动设备或平板电脑访问则自动展现 modern 风格。

通用应用

如果你的应用要同时支持桌面和移动设备，在 Ext JS 6 你可以创建一个通用的应用，这时候将会同时应用两个工具包。你可以添加以下的构建配置(这个配置在程序根目录 app.json 配置文件中，详细的后面会讲到)，来指定构建使用的工具包和主题：

[javascript]  view plain  copy

1. "builds": {  
2.     //这里就很简单了，如果你只想用 classic 那么就注释 modern 的配置即可。  
3.     "classic": {  
4.    
5.        "toolkit": "classic",  
6.    
7.        "theme": "theme-triton"  
8.    
9.     },  
10.    
11.     "modern": {  
12.    
13.        "toolkit": "modern",  
14.    
15.        "theme": "theme-neptune"  
16.    
17.     }  
18.    
19. }  

这样做的大概路子就是，在 Ext JS 这个框架里用这两套工具包分别对应 桌面 和 移动设备。程序在构建过程中，会构建两套 UI 界面出来，而不是我们平时那种响应式的应用，响应式是一套 UI 自动根据不同设备改变布局。实际上在企业开发中，甚至互联网开发中，往往都是独立再开发一套支持移动设备的前端 UI，而 Ext JS 6 将此合并我认为是非常好的，这样你桌面和移动端都有一套标准，而且很多逻辑可以共享复用，不同的 view 写在独立的工具包里。维护起来也很方便。

如果你是一个 Ext JS 新手，看到这里肯定非常困惑，不过你现在不用担心，这些在后面都会有我们的样例代码来说明，会让你有更深的理解。

Ext JS 6 附带了两个主题包， classic 和 modern 主题包，这两个主题包里分别有各自支持的几种主题。

在 Ext JS 中的一些特定主题，提供了在 Windows，Android，iPhone 等设备上类似原生应用的外观。这些你将在第八章(主题和响应设计)学习。

 

设置 Ext JS 开发环境

你需要安装一个叫 Sencha Cmd 的工具，这会让你的 Ext JS 应用开发变得简单。它可用于Windows、Mac 和 Linux。

• Sencha Cmd 并不是开发 Ext JS 应用必须用的，但是它会让你的工作非常轻松，所以这里强烈推荐使用 Sencha Cmd。

Sencha Cmd

Sencha Cmd 是在 sencha 产品下做开发时使用的命令行工具，例如开发 Ext JS ,Sencha Touch 应用时都可以用。它通过许多的自动化任务帮助你提高生产力。它包含以下功能，包管理，JS 编译器，构建脚本，主题等等。

在安装 Sencha Cmd 之前，你需要安装 JRE 环境，如果你使用的是 Sencha Cmd 5，那么你还需要安装 Ruby。这里如何安装 JRE 或 JDK，还是也翻译一下，因为 Sencha Cmd 使用的是 apache ant 作为构建工具，所以需要安装 JRE 环境。而在 Sencha Cmd 5 编译 SASS 时则需要使用 Ruby，上面说过 Ext JS 6 使用 fashion 编译 SASS 了，下载最新的 Sencha Cmd 6 则不需要安装 Ruby了。

Java 运行时环境 (JRE)

在命令行窗口输入以下命令检查 java 是否能正常运行在你的设备上：

[plain]  view plain  copy

1. java -version  

如果你已经在你的设备上安装了 java，那么你应该看到类似下面的代码；否则请下载安装 JRE 或 JDK：

Java version “1.8.0_25”

Java(TM) SE Runtime Environment (build 1.8.0_25-b17)

java HotSpot(TM) 64-Bit Server VM (build 25.25-b02, mixed mode)

这一步报错的话，检查一下你是否配置了 java 环境变量，不知道怎么配置请自行搜索。

Ruby

注意，如果你使用 Sencha Cmd 6 就不需要安装 Ruby，但是如果你正在使用 Sencha Cmd 5，那还是要安装 Ruby 的。输入以下命令，检查 Ruby 是否安装成功:

[plain]  view plain  copy

1. ruby --version  

如果已经安装完成，应该看到类似下面的代码；否则请下载安装 Ruby：

ruby –version

ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

Ruby 也是需要配置环境变量的，这里不再介绍方法，不会的自行搜索。

安装 Sencha Cmd

现在从 Sencha 官网上下载并安装 Sencha Cmd 。安装完成后在命令行窗口输入以下命令检查是否正常运行(同样需要配置环境变量)：

[plain]  view plain  copy

1. sencha which  

正常情况下应该显示类似以下的代码：

Sencha Cmd v6.0.0.92

/bin/Sencha/Cmd/6.0.0.92/

如果报错，你应该配置环境变量，在 Mac 电脑上运行以下命令添加安装路径到 PATH 变量：

[plain]  view plain  copy

1. export PATH=~/bin/Sencha/Cmd/6.0.0.92:$PATH  

在 Windows，运行以下命令添加环境变量(这一步你其实可以略过的，我想能看这篇文章的人都知道怎么做)：

[plain]  view plain  copy

1. set PATH=%PATH%;C:\Sencha\Cmd\6.0.0.92  

用 Sencha Cmd 生成第一个 Ext JS 应用

打开命令行窗口键入以下命令：

[plain]  view plain  copy

1. sencha generate app --ext MyApp ./myapp  

运行上面的命令将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在当前目录下名为 myapp 的文件夹。

注意，上面的命令生成的 Ext JS 应用代码，包含两个工具包：classic 和 modern。因为你不明确指定需要用那个工具包的时候，默认创建的就是通用的应用。如果你需要指定使用 classic 或者 modern 工具包。那么用 –modern 或者 –classic 参数，如以下命令所示：

[plain]  view plain  copy

1. sencha generate app --ext --modern MyApp ./myapp  

当你第一次运行这个命令时，这应该会自动下载 Ext JS 6。如果没有自动下载，那你需要手动的取下载 Ext JS 6，这里贴出来 GPL 协议的 Ext JS 6 官网下载地址 http://cdn.sencha.com/ext/gpl/ext-6.0.0-gpl.zip这里下载后解压，这时候生成 Ext JS 应用时就可以使用以下命令以指定 SDK 的形式生成了：

[plain]  view plain  copy

1. sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp  

Sencha Cmd 支持 Ext JS 4.1.1a 以及更高版本，支持 Sencha Touch 2.1 以及更高版本。在你的电脑里可以有多个版本的 SDK 。 上面的命令是基于一个特定的 Sencha SDK 来生成的 Ext JS 应用。

下面的例子，在目录 /projects/extjs/myapp 下生成名为 MyApp 的 Ext JS 应用：

[plain]  view plain  copy

1. sencha -sdk /bin/Sencha/ext/6.0.0/ generate app MyApp /projects/extjs/myapp  

OK，现在可以查看已经创建的应用了，运行以下命令：

[plain]  view plain  copy

1. cd /projects/extjs/myapp  
2.    
3. sencha app watch  

这时会运行一些构建相关的任务，最终你将在命令行窗口看到类似下图的界面：

上面的命令监控了任意代码修改保存后，都会在浏览器刷新时反应最新的改动。

在浏览器输入默认 URL (http://localhost:1842)，如图所示，看到类似以下界面：

 

默认当你使用电脑访问 URL (http://localhost:1842)，应用会自动检测并为你展示 classic 工具包的 UI。如果访问是来自一个移动端浏览器，它将展示 modern 工具包。如何在电脑上看 modern 风格的应用呢？附加参数  (http://localhost:1842?profile=modern)，你将看到以下截图：

 

 

MyApp 应用的整体目录结构如下图。我们瞧一瞧这个实例程序都有哪些比较重要的文件。

应用包含了 model, store, 和 application.js 。你就把 store 看成是一个 model 实例的集合。store 是为你的程序功能提供并加载数据用的，你可以认为 store 就是一个数据源，它支持排序，过滤，分页等等，经常用到 store 的就是 grid 组件。这些都会在后面一一讲到。

在下面截图中,有 classci 和 modern 这两个文件夹。这两个文件夹包含使用不同工具包时写的 view(视图)代码，例如你 classic 风格的 view(视图) 就应该写在 classic 目录下，modern 风格的 view(视图) 就应该写在 modern 目录下。

 

 

下图为 classic 和 modern 文件夹下的结构。classic 和 modern 都包含 src 目录，而你的 view(视图) 就应该写在  src 里面。

而这个 main.scss 文件是样式文件，在 classic 和 modern 工具包都存在，对应桌面和移动设备的样式。

还有就是在根目录也有一个 sass 文件夹，那里是放置应用所有设备共用的样式。

SASS (Syntactically Awesome Stylesheets)是一种样式语言。Ext JS 中大量的用到 SASS。你将在第8章(主题和响应设计)学习到更多关于样式的知识。

注意 classic 和 modern 目录，这里面都不是 Ext JS 框架的工具包源码，这里是程序的代码，classic 和 modern 两个工具包的源码在根目录 ext 文件夹里：

在下一节，我将给你介绍 MVC ，并且会在 MyApp 这个应用下使用 Sencha Cmd 生成这些 MVC 相关的文件以及学习它。

应用的体系结构

Ext JS 提供支持两种应用架构 MVC 和 MVVM。

 

Model(模型)

这代表着数据层。model 保存的数据可以包含数据验证和逻辑，model 经常用于 store 中。上文已经讲过，store 就是多个 model 的集合。

View(视图)

这一层就是用户界面。包含有 button，form，和 message box 等等组件。

Controller(控制器)

控制器处理 view(视图)相关的逻辑，例如 view 的 event(事件)处理，还有任何程序相关逻辑都可以写在这里。

View model (视图模型)

view model 封装了 view(视图)所需要的展示逻辑，绑定数据到 view 并且每当数据改变时处理更新。

我们看一下通过 Sencha Cmd 创建的 view，controller，view model 相关的文件。

如果你打开 app.js，你将看到下列代码，这是 Ext JS 应用的启动代码：

[javascript]  view plain  copy

1. Ext.application({  
2.   name : 'MyApp',  
3.   extend : 'MyApp.Application',  
4.   requires : [  
5.   'MyApp.view.main.Main'  
6.   ],  
7.   mainView : 'MyApp.view.main.Main'  
8. });  

在上面代码中，name 定义了程序的名称，extend 表示继承 MyApp.Application 类，这个类文件定义在 app 文件夹下名为 Application.js:

[javascript]  view plain  copy

1. extend: ‘MyApp.Application’  

requires 部分指定了这个类需要的类列表。这样在 requires 里面添加的类在当前类中首次实例化时，会去先加载它，你可以把 requires 的作用理解为 java 中的 import 关键字。mainView 指定的是要初始化创建的 view(视图)。

继续，现在查看 app 文件夹，你将看到文件  Application.js，和 model， view， store 等等。

下面是 Application.js 文件里的代码：

[javascript]  view plain  copy

1. Ext.define('MyApp.Application', {     
2.   extend: 'Ext.app.Application',  
3.   name: 'MyApp',     
4.   stores: [  
5.   // TODO: add global / shared stores here  
6.   ],  
7.   launch: function () {  
8.     // TODO - Launch the application     
9.   }   
10. });  

这里你可以看到 MyApp.Application 继承自Ext.app.Application。这个 launch 函数是在 Ext.app.Application 类里。这个函数将会在页面加载完成后调用。

这个 stores 是指定需要的 store 的，这里并没有用到，你将在后面的章节中学习到关于 store 的更详细的知识。

视图模型 – MainModel.js

现在看一下 \app\view\main\ 目录下的 MainModel.js 文件。这个类是 Main 视图的 view model(视图模型)。这个视图模型继承自 Ext.app. ViewModel，代码如下所示：

[javascript]  view plain  copy

1. Ext.define('MyApp.view.main.MainModel',{  
2.   extend : 'Ext.app.ViewModel',  
3.   alias : 'viewmodel.main',  
4.   data : {  
5.     name : 'MyApp',  
6.     loremIpsum : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'  
7.   }  
8. });  

控制器 – MainController.js

这个类是 Main 视图的控制器。在下列代码中你可以看到 onItemSelected 函数，这个函数将在视图里的 grid 中选中某一项时触发调用。这是什么原理呢？后面会讲到的。

[javascript]  view plain  copy

1. Ext.define('MyApp.view.main.MainController', {  
2.   extend : 'Ext.app.ViewController',  
3.   alias : 'controller.main',  
4.   onItemSelected : function(sender, record) {  
5.     Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);  
6.   },  
7.   onConfirm : function(choice) {  
8.     if (choice === 'yes') {  
9.       //  
10.     }  
11.   }  
12. });  

我们可以看到 extend 继承了 Ext.app.ViewController 这个类。Ext JS 中有两种类型的控制器： Ext.app.ViewController 和 Ext.app.Controller。

在后面的章节中你将会学习到这两种控制器有何区别。

视图 – Main.js

如果你用的是 Sencha Cmd 5,，并且你生成应用时执行了使用哪种 toolkits 工具包，是 –modern 或 –classic ，如果是这样那么 Main.js 文件就在 \app\view\main 文件夹下面。但是如果你用 Sencha Cmd 6 生成的是通用的应用，那么将会有两个 Main.js 文件，分别在 \modern\src\view\main\ 和 \classic\src\view\main\ 目录下面。

在查看这两个文件的内容之前，我先通过这两个不同路径的 Main.js 文件来解释一下。在本章的上文中，你已经知道为什么 Ext JS 6 合并了 Ext JS 和 Sencha Touch 为一个框架。这两个框架合并后共用一个核心，剩下的代码则分为两部分 classic 和 modern。传统的 Ext JS 代码移动到 classic 工具包，而 modern 的代码支持触摸和 HTML5 在 modern 工具包。所以这里需要两个工具包，程序会根据访问设备自动使用对应的工具包里的 UI 类(view)。

• 应用分两个工具包并共享核心资源和逻辑，这称为通用应用。

现在我们看一下在 modern 下的 Main.js 文件：

[javascript]  view plain  copy

1. Ext.define('MyApp.view.main.Main', {  
2.   extend : 'Ext.tab.Panel',  
3.   xtype : 'app-main',  
4.   requires : [  
5.   'Ext.MessageBox',  
6.   'MyApp.view.main.MainController',  
7.   'MyApp.view.main.MainModel',  
8.   'MyApp.view.main.List'  
9.   ],  
10.   controller : 'main',  
11.   viewModel : 'main',  
12.   defaults : {  
13.     styleHtmlContent : true  
14.   },  
15.   tabBarPosition : 'bottom',  
16.   items : [{  
17.     title : 'Home',  
18.     iconCls : 'fa-home',  
19.     layout : 'fit',  
20.     items : [ {  
21.       xtype : 'mainlist'  
22.     } ]  
23.   }, {  
24.     title : 'Users',  
25.     iconCls : 'fa-user',  
26.     bind : {  
27.       html : '{loremIpsum}'  
28.     }  
29.   }, {  
30.     title : 'Groups',  
31.     iconCls : 'fa-users',  
32.     bind : {  
33.       html : '{loremIpsum}'  
34.     }  
35.   }, {  
36.     title : 'Settings',  
37.     iconCls : 'fa-cog',  
38.     bind : {  
39.       html : '{loremIpsum}'  
40.     }  
41.   }]  
42. });  

这个 Main 视图是一个 tab panel，因为它继承了 Ext.tab.Panel 。这个类有属性 controller， viewmodel，requires 配置了需要依赖的类。创建了四个 tab 页(items属性)，并且绑定了数据 ViewModel 里的loremIpsum 属性。你将会在后续章节中了解关于此更多的详细信息。

接着看一下在 \classic\src\view\main\ 下的 Main.js 文件内容：

[javascript]  view plain  copy

1. Ext.define('NewApp.view.main.Main', {  
2.   extend : 'Ext.tab.Panel',  
3.   xtype : 'app-main',  
4.   requires : [  
5.   'Ext.plugin.Viewport',  
6.   'Ext.window.MessageBox',  
7.   'NewApp.view.main.MainController',  
8.   'NewApp.view.main.MainModel',  
9.   'NewApp.view.main.List'  
10.   ],  
11.   controller : 'main',  
12.   viewModel : 'main',  
13.   ui : 'navigation',  
14.   tabBarHeaderPosition : 1,  
15.   titleRotation : 0,  
16.   tabRotation : 0,  
17.   header : {  
18.     layout : {  
19.       align : 'stretchmax'  
20.     },  
21.     title : {  
22.       bind : {  
23.         text : '{name}'  
24.       },  
25.       flex : 0  
26.     },  
27.     iconCls : 'fa-th-list'  
28.   },  
29.   tabBar : {  
30.     flex : 1,  
31.     layout : {  
32.       align : 'stretch',  
33.       overflowHandler : 'none'  
34.     }  
35.   },  
36.   responsiveConfig : {  
37.     tall : {  
38.       headerPosition : 'top'  
39.     },  
40.     wide : {  
41.       headerPosition : 'left'  
42.     }  
43.   },  
44.   defaults : {  
45.     bodyPadding : 20,  
46.     tabConfig : {  
47.       plugins : 'responsive',  
48.       responsiveConfig : {  
49.         wide : {  
50.           iconAlign : 'left',  
51.           textAlign : 'left'  
52.         },  
53.         tall : {  
54.           iconAlign : 'top',  
55.           textAlign : 'center',  
56.           width : 120  
57.         }  
58.       }  
59.     }  
60.   },  
61.   items : [ {  
62.     title : 'Home',  
63.     iconCls : 'fa-home',  
64.     items : [ {  
65.       xtype : 'mainlist'  
66.     } ]  
67.   }, {  
68.     title : 'Users',  
69.     iconCls : 'fa-user',  
70.     bind : {  
71.       html : '{loremIpsum}'  
72.     }  
73.   }, {  
74.     title : 'Groups',  
75.     iconCls : 'fa-users',  
76.     bind : {  
77.       html : '{loremIpsum}'  
78.     }  
79.   }, {  
80.     title : 'Settings',  
81.     iconCls : 'fa-cog',  
82.     bind : {  
83.       html : '{loremIpsum}'  
84.     }  
85.   } ]  
86. });  

上面代码中，items 中的代码几乎和 modern 工具包中的是一样的。此外，这个文件有些配置是专用于支持响应设计的。下列代码告诉框架使用的 ui  组件为 navigation：   

[javascript]  view plain  copy

1. ui: ‘navigation’  

在第8章(主题和响应设计)中会介绍关于这个 UI 配置和响应设计的内容。

同样的，如果你打开 classic 或 modern 下的 List.js ，你会发现他们只有很细微的区别。

 

探索 Sencha Cmd 命令

现在让我们学习 Sencha Cmd 的一些非常有用的命令。

Sencha 命令格式

Sencha 命令采取以下格式：

sencha [category] [command] [options…] [arguments…]

在 Sencha Cmd 中许多命令和可选项。我们看一下都有哪些比较重要的命令。

Help

键入以下命令，你将获取一个 categories(类别)列表，一个顶层的 commands(命令)列表，一个可用的 options(选项)列表：

[plain]  view plain  copy

1. sencha help  

获取一个特定类别的帮助信息，类别名称紧随在 help 后面，例如获取一个类别 app 的帮助信息，运行下列命令：

[plain]  view plain  copy

1. sencha help app  

将产生以下输出：

如果你想进一步获取 app 命令下的子命令的帮助信息，你只需要在最后添加子命令例如 clean，如以下代码所示：

[plain]  view plain  copy

1. sencha help app clean  

将产生以下输出：

升级 Sencha Cmd

如果你想检查是否有 Sencha Cmd 可用的更新，使用以下命令：

[plain]  view plain  copy

1. sencha upgrade --check  

如果你要升级 Sencha Cmd，只需要移除 –check 选项，如以下代码所示：

[plain]  view plain  copy

1. sencha upgrade  

升级 ExtJS 应用

升级一个现有的 ExtJS 应用到最新版本，需要先进入到你的 ExtJS 工程目录，使用一下命令：

[plain]  view plain  copy

1. sencha app upgrade 后面跟上 sdk 路径  

不加路径的话，就会自动从官网下载最新版本的 ExtJS 框架。

注意：如果 sencha cmd 与要升级到的 ExtJS 框架版本不兼容，需要先升级 SenchaCMD 再升级 ExtJS。

生成一个应用

Sencha Cmd 支持 Ext JS 4.1.1a 及更高版本和支持 Sencha Touch 2.1 及更高版本。你电脑上可以存在多个版本的 SDK。这是基于 Sencha SDK 生成应用的命令格式，例如 Ext JS 或者 Sencha Touch：

[plain]  view plain  copy

1. sencha -sdk /path/to/sdk generate app [--modern/classic] MyApp /path/to/ myapp  

这个示例代码将在目录 /Users/SomeUser/projects/extjs/myapp 下生成名为 MyApp 的 Ext JS 6 应用 ：

[plain]  view plain  copy

1. sencha -sdk /Users/SomeUser/bin/Sencha/Cmd/repo/extract/ext/6.0.0/ generate app MyApp /Users/SomeUser/projects/extjs/myapp  

构建应用

运行下列命令将进行构建 HTML，JS，SASS 等等：

[plain]  view plain  copy

1. sencha app build  

使用 Sencha Cmd 6 构建 Ext JS 6 应用，你还可以运行下列命令选择构建 moern 或 classic 风格的应用：

[plain]  view plain  copy

1. sencha app build modern  
2. sencha app build classic  

这里说一下，modern 和 classic 的构建配置在 app.json。 默认 Sencha Cmd 运行两个构建配置： classic 和 modern 。如果需要你也可以在 app.json 中添加额外的构建配置。

启动应用

watch 命令用于重新构建并启动应用。这不仅会启动应用程序,还监视任何代码更改，一旦代码改变，浏览器刷新将包括最新的代码：

[plain]  view plain  copy

1. sencha app watch  

在 Sencha Cmd 6 和 Ext JS 6，你也可以运行下列命令选择 modern 或 classic：

[plain]  view plain  copy

1. sencha app watch modern  
2. sencha app watch classic  

代码生成

用Sencha Cmd，你可以生成 Ext JS 代码，例如 view，controller，model：

[plain]  view plain  copy

1. sencha generate view myApp.MyView  
2.    
3. sencha generate model MyModel id:int,fname,lname  
4.    
5. sencha generate controller MyController  

当你生成 model 时如果不指定字段类型，默认类型是 string。

 

升级你的应用

Sencha Cmd 升级 SDK 的版本是很容易的。使用这个升级命令将你的程序升级到新框架：

[plain]  view plain  copy

1. sencha app upgrade [ path-to-new-framework ]  

调试 Ext JS 应用

你可以使用浏览器默认的调试器来调试 Ext JS 代码，但是使用火狐浏览器的 firebug 插件再安装 Illumination 或者使用 Chrome 的 Inspector 插件调试这将会容易得多。

Illumination

Illumination 是一个第三方工具。它并不是 Sencha 的一个产品，目前它只支持火狐浏览器。

Illumination 的特性

这有些 Illumination 的特性，这将减少你在调试上花的时间。

对象命名

Illumination 会很容易识别出 Ext JS 组件，所以在 illumination 标签页你能看到 Ext JS 组件名称，例如 Ext.panel.Panel 而不是像在 firebug 的 DOM 页里那样显示成 Object。

Element 高亮

如果在 Illumination 窗口你鼠标悬停在任意对象上，将会突出高亮在 HTML 页面中的组件。

上下文菜单The contextual menu

一个 Ext JS 组件是由数个 HTML 元素组成的。如果你在页面右击选择使用 firebug 查看元素，你会看到元素是嵌套在 Ext JS 组件里，但是如果你选择 Illumination 来查看元素，会直接显示 Ext JS 组件，这更有便于检查组件的方法属性和事件。

firebug DOM 标签页里对象是如何展示的：

再看一下 Illumination 标签页下对象是如何展示的，你会发现所有组件都显示在下列截图中：

尽管 Illumination 使调试 Ext JS 应用变得容易，但是并不是必须用它。它并不是免费的，你不想购买的话，仍然可以使用 firebug 调试，但你也许会多花一些时间调试，或者使用 App Inspector 插件或者 Sencha Fillde 调试。然并卵，我还是建议使用 firebug 就行了。

 

App Inspector

App Inspector 是一个由 Sencha 开发的免费的 Chrome 插件。它支持所有 Illumination 支持的功能。

相比使用 Illumination 一些信息在 App Inspector 查找更容易方便，并且使用 Illumination 比使用 App Inspector 载入程序时间更长。

App Inspector 的截图：

 

Sencha Fiddle

这是另外的一个调试工具。这也是一个在线的基于 web 的 IDE 并提供了一些调试功能，如下图：

开发 IDE

尽管你可以使用任何简单的文本编辑器来编写 Ext JS 代码，使用 IDE 开发肯定更简单。Sencha 为JetBrains 提供 Sencha JetBrains 插件支持，例如  IntelliJ，WebStrome，PHPStorm，和 RubyMine。

 

如果你在寻找一些免费的 IDE，那么你可以看一下 Visual Studio Code 和 Brackets.io 。这两个都是非常轻量级，并且开源的文本编辑器，支持 Mac，Windows，linux，下图是 Visual Studio Code：

总结

在本章中, 我们看到了使用 JavaScript 框架相较于使用传统纯 JavaScript 的优势。也了解了 Ext JS 应用的体系结构，你也学习到如何配置你的开发环境以及如何用 Sencha Cmd 搭建 Ext JS 应用。

在下一章中, 您将了解Ext JS的核心概念和基本知识。