Ext JS 6學習文檔–第1章–ExtJS入門指南

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的核心概念和基本知識。