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
升級 ExtJS 應用
升級一個現有的 ExtJS 應用到最新版本，需要先進入到你的 ExtJS 工程目錄，使用一下命令：
1
sencha app upgrade 後面跟上 sdk 路徑
不加路徑的話，就會自動從官網下載最新版本的 ExtJS 框架。
注意：如果 sencha cmd 與要升級到的 ExtJS 框架版本不兼容，需要先升級 SenchaCMD 再升級 ExtJS。
生成一個應用
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 應用。
在下一章中, 您將瞭解Ext JS的核心概念和基本知識。
詳細資料，請加羣獲取：586656942
