Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南

前言

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

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

转载请注明出处：http://www.jeeboot.com/archives/1211.html

正文

如今若是你打算学习 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 配置文件中，详细的后面会讲到)，来指定构建使用的工具包和主题：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

"builds": {     //这里就很简单了，若是你只想用 classic 那么就注释 modern 的配置便可。     "classic": {          "toolkit": "classic",          "theme": "theme-triton"       },       "modern": {          "toolkit": "modern",          "theme": "theme-neptune"       }   }

 

这样作的大概路子就是，在 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 是否能正常运行在你的设备上：

 

 

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 是否安装成功:

 

 

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 。安装完成后在命令行窗口输入如下命令检查是否正常运行(一样须要配置环境变量)：

 

 

1	sencha which

正常状况下应该显示相似如下的代码：

Sencha Cmd v6.0.0.92

/bin/Sencha/Cmd/6.0.0.92/

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

 

 

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

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

 

 

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

 

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

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

 

 

1	sencha generate app --ext MyApp ./myapp

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

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

 

 

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 的形式生成了：

 

 

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 应用：

 

 

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

OK，如今能够查看已经建立的应用了，运行如下命令：

 

 

1 2 3

cd /projects/extjs/myapp   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 应用的启动代码：

 

 

1 2 3 4 5 6 7 8

Ext.application({ name : 'MyApp', extend : 'MyApp.Application', requires : [ 'MyApp.view.main.Main' ], mainView : 'MyApp.view.main.Main' });

 

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

extend: ‘MyApp.Application’

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

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

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

 

 

1 2 3 4 5 6 7 8 9 10

Ext.define('MyApp.Application', {   extend: 'Ext.app.Application', name: 'MyApp',   stores: [ // TODO: add global / shared stores here ], launch: function () { // TODO - Launch the application   } });

 

这里你能够看到 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，代码以下所示：

 

 

1 2 3 4 5 6 7 8

Ext.define('MyApp.view.main.MainModel',{ extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : { name : 'MyApp', 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.' } });

 

控制器 – MainController.js

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

 

 

1 2 3 4 5 6 7 8 9 10 11 12

Ext.define('MyApp.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') { // } } });

 

咱们能够看到 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 文件：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Ext.define('MyApp.view.main.Main', { extend : 'Ext.tab.Panel', xtype : 'app-main', requires : [ 'Ext.MessageBox', 'MyApp.view.main.MainController', 'MyApp.view.main.MainModel', 'MyApp.view.main.List' ], controller : 'main', viewModel : 'main', defaults : { styleHtmlContent : true }, tabBarPosition : 'bottom', items : [{ title : 'Home', iconCls : 'fa-home', layout : 'fit', 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}' } }] });

 

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

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

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

Ext.define('NewApp.view.main.Main', { extend : 'Ext.tab.Panel', xtype : 'app-main', requires : [ 'Ext.plugin.Viewport', 'Ext.window.MessageBox', 'NewApp.view.main.MainController', 'NewApp.view.main.MainModel', 'NewApp.view.main.List' ], controller : 'main', viewModel : 'main', ui : 'navigation', tabBarHeaderPosition : 1, titleRotation : 0, tabRotation : 0, header : { layout : { align : 'stretchmax' }, title : { bind : { text : '{name}' }, flex : 0 }, iconCls : 'fa-th-list' }, 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', 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}' } } ] });

 

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

   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(选项)列表：

 

 

1	sencha help

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

 

 

1	sencha help app

将产生如下输出：

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

 

 

1	sencha help app clean

将产生如下输出：

升级 Sencha Cmd

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

 

 

1	sencha upgrade --check

若是你要升级 Sencha Cmd，只须要移除 –check 选项，如如下代码所示：

 

 

1	sencha upgrade

 

生成一个应用

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

 

 

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

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

 

 

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 等等：

 

 

1	sencha app build

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

 

 

1 2	sencha app build modern sencha app build classic

这里说一下，modern 和 classic 的构建配置在 app.json。 默认 Sencha Cmd 运行两个构建配置： classic 和 modern 。若是须要你也能够在 app.json中添加额外的构建配置。

启动应用

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

 

 

1	sencha app watch

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

 

 

1 2	sencha app watch modern sencha app watch classic

 

代码生成

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

 

 

1 2 3 4 5

sencha generate view myApp.MyView   sencha generate model MyModel id:int,fname,lname   sencha generate controller MyController

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

 

升级你的应用

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

 

 

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 应用。