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