Ext JS的認識
1．ExtJS寫起來代碼就像 java 一樣，非常嚴謹，非常面向對象。缺點就是在前端 JS庫中屬于比較重量級
2．Ext JS就是一個客戶端的 JavaScript 框架
Ext JS的優點：
1． 跨瀏覽器支持
2． 豐富的UI組件
3． 雙向數據綁定
雙向數據綁定意味著當視圖View的數據發生變化，你的模型model將自動更新。同樣的，當你的應用更新這個模型model，這個數據也將自動傳遞到view
就拿編輯頁面來舉例。當這個頁面（view）加載，這時已經渲染了來自模型（model）的數據到HTML，并且當用戶在頁面（view）上更新這個數據，這時候你需要更新你的模型（model），但如果你使用Ext JS將不需要你自己去做這些編程。
4. Javascript的架構模式（MVC/MVVM）
MVC（Model View Controller）/MVVM(Model View View Model)
5. 訪問DOM變得容易
6. 客戶端路由
路由可以在服務端也可以在客戶端。通常客戶端路由都是用單頁式應用實現的。Single-Page application(SPA)。
7. 支持無障礙訪問
無障礙訪問特性意味著這個應用程序的內容必須是可以方便的讓視力受損的人借助輔助設備訪問(例如屏幕閱讀器)。而開發一個應用程序能夠很好的支持無障礙特性是非常困難的。這里 Ext JS已經為你做了。
在美國，如果你開發的軟件供聯邦和州政府職員使用，在絕大多數情況下，你需要確保你的程序是支持無障礙訪問特性的。這一點，很少 JavaScript框架能對無障礙訪問特性有較好的支持。而 Ext JS 提供了完美的無障礙訪問支持。并且所有的控件都可以支持，不需要你做任何額外的編碼。
介紹Ext JS
Ext JS 作為一個一站式的開發富UI應用的框架。
在Ext JS中，你寫的代碼基本上就是JavaScript，因為你不需要寫HTML。Ext JS附帶一組龐大豐富的UI組件，這時你的開發過程中會節約你相當多的時間。
在Ext JS 6 中最重要的變化是結合了兩個框架：Ext JS和Sencha Touch合并成為了一個框架。Ext JS主要用于桌面級的web應用。Sencha Touch主要用于移動設備。
在Ext JS 6合并后兩個框架通用的代碼作為一個核心，并引入了一個toolkit（工具箱）的概念。Toolkit是一個可視化的組件包。
Ext JS 6有兩個工具包：classic（古典）存放原來Ext JS的可視化組件。Modern（現代）存放原來Sencha Touch的可視化組件。
Ext JS 6還帶來了一個新的SASS編譯其叫做Fashion，以及3D圖表的改進等等。
通用應用
在Ext JS 6中你可以創建一個通用的應用，通用的應用是指同時支持桌面和移動設備。這時候將會同時應用兩個工具包。你可以添加一下的構建配置（這個配置在程序根目錄app.json配置文件中，詳細的后面會講到），來指定構建使用的工具包主題:
"builds": {
//這里就很簡單了，如果你只想用 classic那么就注釋 modern 的配置即可。
"classic":{
"toolkit": "classic",
"theme": "theme-triton"
},
"modern":{
"toolkit": "modern",
"theme": "theme-neptune"
}
}
這應做的思路就是，在Ext JS這個框架里用這兩個工具包分別對應桌面和移動設備。
設置ExtJS開發環境
1. 安裝Sencha Cmd
Sencha Cmd雖然不是開發Ext JS應用的必備工具，但是它會讓你的開發工作非常輕松，它包括以下功能,包括管理，JS編譯器，構建腳本，主題等等。
在安裝Sencha Cmd之前，你需要先安裝JRE環境，如果你使用的是 Sencha Cmd 5，那么你還需要安裝 Ruby。
安裝完成Sencha Cmd后在命令行輸入一下命令（Sencha Cmd需要環境配置）
1 | sencha which |
正常情況下應該顯示類似以下的代碼：
SenchaCmd v6.0.0.92
/bin/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 |
SenchaCmd 支持 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:1841)，如圖所示
，看到類應用會自動檢測并為你展示 classic工具包的UI。如果訪問是來自一個移動端瀏覽器，它將展示 modern工具包。如何在電腦上看 modern 風格的應用呢？附加參數 (http://localhost:1841?profile=modern)，你將看到以下截圖：
MyApp應用的整體目錄中應包含了model,store,和application.js.可以把store看成一個model實例的集合，store是為你的程序功能提供并加載數據用的，可以把store看為一個數據源，它支持排序，過濾，分頁等，經常用到store的就是grid組件。
在下面截圖中,有 classci和 modern 這兩個文件夾。這兩個文件夾包含使用不同工具包時寫的 view(視圖)代碼，例如你 classic風格的 view(視圖)就應該寫在 classic 目錄下，modern風格的 view(視圖)就應該寫在 modern 目錄下。
Class和modern都包含src目錄，而你的view（視圖）就應該寫在src里面。
這個main.sCSS文件是樣式文件，在classic和modern工具包都存在，對應桌面和移動設備的樣式。
在根目錄也有一個sass文件夾，那里是放置所有設備公用的樣式。
SASS（Syntactically（語法）Awesome（極好的） Stylesheets（樣式表））是一種樣式語言。
class和modern目錄，都不是Ext JS框架的工具包源碼。classic 和moden兩個工具包的源碼都在根目錄ext文件夾里邊
應用的體系結構
Ext JS提供支持兩種應用框架MVC和MVVM。
Model（模型）
代表數據層，model保存的數據主要包含數據驗證和邏輯，model經常用于store中，可以說store是多個model的集合。
View（視圖）
這一層是用戶界面，包含button，form，和message box等各種組件。
Controller(控制層)
控制層主要處理view（視圖）相關的邏輯。
View model（視圖模型）
view model封裝了view（視圖）所需的展示邏輯，綁定數據到view并且每當數據改變時處理更新。
如果你打開sass的文件夾下的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。
requires部分指定了這個類所需要的類列表。這樣在requires里面添加的類在當前類中首次實例化時，會去加載它，其實可以把request的作用理解為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類里。這個函數將在頁面加載完成后調用。
視圖模型—MainModel.js
在看一下/app/view/main/目錄下的MainModel.js 文件。這個類是Main視圖的viewmodel（視圖模型）。這個視圖模型繼承自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 6生成的通用應用，那么將會有兩個Main.js文件，分別在/modern/src/view/main/和/classic/src/view/main/ 目錄下面。
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里的loremlpsum屬性。
接著看一下在 /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’
Sencha命令格式
Sencha命令采用的格式：
sencha[category] [command] [options…] [arguments…]
Help
鍵入以下命令，你將獲取一個 categories(類別)列表，一個頂層的 commands(命令)列表，一個可用的 options(選項)列表：
1 | sencha help |
獲取一個特定類別的幫助信息，類別名稱緊隨在 help后面，例如獲取一個類別 app 的幫助信息，運行下列命令：
1 | sencha help app |
將產生以下輸出：
如果你想進一步獲取 app 命令下的子命令的幫助信息，你只需要在最后添加子命令例如 clean，如以下代碼所示：
1 | sencha help app clean |
將產生以下輸出：
升級一個現有的 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/ |
運行下列命令將進行構建 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 代碼，但是使用火狐瀏覽器的 firebug 插件再安裝 Illumination或者使用 Chrome 的 Inspector插件調試這將會容易得多。
Illumination
Illumination 是一個第三方工具。它并不是 Sencha 的一個產品，目前它只支持火狐瀏覽器。
這有些 Illumination 的特性，這將減少你在調試上花的時間。
Illumination 會很容易識別出 Ext JS 組件，所以在 illumination 標簽頁你能看到 Ext JS 組件名稱，例如 Ext.panel.Panel 而不是像在 firebug的 DOM 頁里那樣顯示成Object。
如果在 Illumination 窗口你鼠標懸停在任意對象上，將會突出高亮在 HTML 頁面中的組件。
一個 Ext JS 組件是由數個 HTML元素組成的。如果你在頁面右擊選擇使用 firebug 查看元素，你會看到元素是嵌套在 Ext JS 組件里，但是如果你選擇 Illumination來查看元素，會直接顯示 Ext JS 組件，這更有便于檢查組件的方法屬性和事件。
firebug DOM 標簽頁里對象是如何展示的：
再看一下 Illumination標簽頁下對象是如何展示的，你會發現所有組件都顯示在下列截圖中：
盡管 Illumination使調試 Ext JS應用變得容易，但是并不是必須用它。它并不是免費的，你不想購買的話，仍然可以使用 firebug調試，但你也許會多花一些時間調試，或者使用 App Inspector 插件或者 SenchaFillde 調試。然并卵，我還是建議使用 firebug就行了。
App Inspector 是一個由 Sencha 開發的免費的 Chrome 插件。它支持所有 Illumination 支持的功能。
相比使用 Illumination一些信息在 AppInspector查找更容易方便，并且使用 Illumination 比使用 App Inspector 載入程序時間更長。
App Inspector 的截圖：
這是另外的一個調試工具。這也是一個在線的基于 web 的 IDE 并提供了一些調試功能，如下圖：
開發 IDE
盡管你可以使用任何簡單的文本編輯器來編寫 Ext JS 代碼，使用 IDE 開發肯定更簡單。Sencha 為JetBrains 提供 Sencha JetBrains 插件支持，例如 IntelliJ，WebStrome，phpStorm，和 RubyMine。
這里為大家推薦Visual Studio Code這個免費的IDE工具。
新聞熱點
疑難解答
