EXT JS

Posted 2020-10-09 挽你何用

当涉及到 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 应用。