EXT 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?

跨浏览器支持

丰富的 UI 组件

双向数据绑定

JavaScript 的架构模式(MVC/MVVM)

简化复杂的操做

访问 DOM 变得容易

客户端路由

支持无障碍访问

 

介绍 Ext JS

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

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

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

"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 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 是否能正常运行在你的设备上：

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

  ruby --version

若是已经安装完成，应该看到相似下面的代码；不然请下载安装 Ruby：

ruby –version

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

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

安装 Sencha Cmd

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

 sencha  which

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

Sencha Cmd v6.0.0.92

/bin/Sencha/Cmd/6.0.0.92/

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

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

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

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

 

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

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

sencha generate app --ext MyApp ./myapp

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

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

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

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

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

 

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

 

cd /projects/extjs/myapp

 

sencha app watch

 

这时会运行一些构建相关的任务,上面的命令监控了任意代码修改保存后都会在浏览器刷新时反应最新的改动。在浏览器输入默认 URL (http://localhost:1842)，默认当你使用电脑访问 URL(http://localhost:1842)，应用会自动检测并为你展现 classic 工具包的 UI。若是访问是来自一个移动端浏览器，它将展现 modern 工具包。如何在电脑上看 modern 风格的应用呢？附加参数(http://localhost:1842profile=modern)，MyApp 应用的总体目录结构以下图。咱们瞧一瞧这个实例程序都有哪些比较重要的文件。应用包含了 model, store, 和 application.js 。你就把 store 当作是一个 model 实例的集合。store 是为你的程序功能提供并加载数据用的，你能够认为 store 就是一个数据源，它支持排序，过滤，分页等等，常常用到 store 的就是 grid 组件。而这个 main.scss 文件是样式文件，在 classic 和 modern 工具包都存在，对应桌面和移动设备的样式。还有就是在根目录也有一个 sass 文件夹，那里是放置应用全部设备共用的样式。SASS (Syntactically Awesome Stylesheets)是一种样式语言。Ext JS 中大量的用到 SASS。你将在第8章(主题和响应设计)学习到更多关于样式的知识。注意 classic 和 modern 目录，这里面都不是 Ext JS 框架的工具包源码，这里是程序的代码，classic 和 modern 两个工具包的源码在根目录 ext 文件夹里。

 

应用的体系结构

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 应用的启动代码：

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 文件里的代码：

 

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 的。

视图模型 – MainModel.js

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

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 中选中某一项时触发调用。

 

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 文件：

 

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 文件内容：

 

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

 sencha help

 

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

 sencha help app

 

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

 sencha help app clean

 

升级 Sencha Cmd

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

 sencha upgrade --check

 

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

 sencha upgrade

 

生成一个应用

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

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

 

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

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

  

构建应用

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

sencha app build 

 

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

sencha app build modern

sencha app build classic

 

这里说一下，modern 和 classic 的构建配置在 app.json。 默认 Sencha Cmd 运行两个构建配置： classic 和 modern 。

启动应用

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

 

sencha app watch

 

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

sencha app watch modern

sencha app watch classic

  

代码生成

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

 

sencha generate view myApp.MyView

 

sencha generate model MyModel id:int,fname,lname

 

sencha generate controller MyController

 

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

 

升级你的应用

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

 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 组件，这更有便于检查组件的方法属性和事件。

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

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

 

App Inspector

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

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

 

Sencha Fiddle

 

开发 IDE

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

 

若是你在寻找一些免费的 IDE，那么你能够看一下 Visual Studio Code 和 Brackets.io 。这两个都是很是轻量级，而且开源的文本编辑器，支持 Mac，Windows，Linux。

 

总结

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