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