## 開發工具（IDE集成開發平臺） IDE開發平臺可以加快開發的速度，可以選用Eclipse 或者Visual Studio Code，Sencha官方也提供了這兩個IDE的插件，但是這個插件時收費的。對于初學者，可以不使用插件。這里使用Visual Studio Code，下載地址：[https://code.visualstudio.com/](https://code.visualstudio.com/)。 也可到如下地址下載： 鏈接：https://pan.baidu.com/s/1hjrxNp9bybqKgsNkwLdENA 提取碼：eype ## Visual Studio Code安裝 雙擊安裝文件 VSCodeUserSetup-x64-1.42.0.exe 安裝。默認會按照到`C:\Program Files`目錄。 ## 在Visual Code Code中打開項目 啟動Visual Studio Code， 選擇File|Open Folder  選擇項目路徑  打開后的項目結構如下：  Ext JS支持兩種開發模式： * Classic： 經典模式，桌面端應用 * Modern： 現代模式， 移動端應用 應該該示例項目創建的是包含和經典和現代模式的應用，所以項目的子目錄包含classic和modern。 雖然經典和現代模式因為不同的終端頁面顯示的處理和API不同，但是對于數據已經模型相關的定義是沒有差別的，所以這些部分是可以合并在一起的。 對項目的各子目錄說明如下： * app，包括模式、數據倉庫和控制器類的定義。 * build：編譯后的目錄 * classic：經典模式的視圖類 * ext: Ext JS的基本類或原生類。（Ext JS SDK） * modern: 現代模式的視圖類 * resource：資源文件， 比如圖片文件等。 ## 在Visual Code 中啟動項目 在Visual Studio Code中，可以直接打開命令終端，執行啟動應用的命令。步驟是： 1. 在左邊的文件導航區塊右鍵單擊 2. 選擇“Open in Terminal”， 則在右邊的下方會切換到 "TERMINAL"的標簽頁，該標簽頁就相當于一個命令窗口。 3. 該命令窗口的默認路徑就是項目的根路徑（注意：不要選中任何目錄，否則會進入選中的目錄的路徑），輸入 `sencha app watch`  ## 第一個改動： 從修改產生的代碼開始 應用啟動后，在瀏覽器端輸入`http://localhost:1841/`， 瀏覽器顯示的效果如圖：  上圖中導航欄條目旁邊是一個長方形的方塊，其實這是一個圖標。在Sencha Cmd 6之前產生的項目基本上是正常的。 但是這個問題只出現在經典模式（classic）中， 在現代模式（modern）是正常的， 在瀏覽器中輸入：`http://localhost:1841/?modern` 訪問現代模式的效果，頁面如下：  使用 Cmd產生的項目的classic模式的主頁面的JS源文件位于 `classic\src\view\main\Main.js`,與modern模式對應的文件（ `modern\src\view\main\Main.js`）對比后會發現，導航欄條目的 iconCls略微有點不一樣， 正常的顯示包含`x-fa`。  iconCls是設定條目的圖標樣式，使用的是Font Awesome的字體圖標庫。 看起來classic中少了`x-fa`前綴，雙擊打開`classic\src\view\main\Main.js`，在iconCls中添加`x-fa`。 修改并保存的時候， 會發現命令控制臺會即時的輸出日志：  這是因為，** Cmd會即時偵聽到文件的變化， 對于文件的修改甚至大部分的新增代碼文件都可以即時偵聽到， 不需要重啟服務，只需要在瀏覽器端刷新頁面就可以看到修改后的效果**，這里刷新頁面，顯示效果如下：  ## 開發嘗鮮：自定義的Grid（網格） 接下來定義顯示一個三國名人的網格（Grid），點擊左邊的“三國名人錄”，在右邊顯示對應的表格，最終的效果如下：  開發步驟： 1. 定義模型類 Ext7DemoApp.model.User 2. 定義User類型的數據倉庫：Ext7DemoApp.store.User 3. 定義Grid的組件Ext7DemoApp.view.main.UserGrid 4. 在左邊導航欄增加一條記錄，點擊后顯示步驟3的組件。 目錄結構代碼的增加和修改如下圖：  #### 模型類 Ext7DemoApp.model.User Model , 模型，相當于后端開發的實體類，源碼文件的全路徑文件名是： app/model/User.js。該實體類包括三個屬性： id 、name（名字）以及kingdom(所屬的諸侯國)，代碼如下： ``` Ext.define('Ext7DemoApp.model.User', { extend: 'Ext7DemoApp.model.Base', fields: [ 'id', 'name', 'kingdom' ] }); ``` * extend： 繼承共同的父類 * fields： 模型類的字段 #### 數據倉庫類 Ext7DemoApp.store.User Store, 數據倉庫，包含了某種類型對象的集合。Store中數據的來源可以通過服務地址從后端獲取，也可以使用本地內存數據， 簡單起見，這是使用memory類型的數據，定義如下： ``` Ext.define('Ext7DemoApp.store.User', { extend: 'Ext.data.Store', alias: 'store.user', model: 'Ext7DemoApp.model.User', data: { items: [ { id: 1, name: '劉備', kingdom: "蜀國" }, { id: 2, name: '曹操', kingdom: "魏國" }, { id: 3, name: '孫權', kingdom: "吳國" }, ] }, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); ``` * extend： 繼承的父類Ext.data.Store * alias，別名，這里配置為`store.user`后， 在組件中就可以使用 store后面的`user`來使用了。 * data： 包含的數據集合 * proxy, 數據獲取的方式以及解析器的配置。這里讀取內存數據（memory,也就是data配置的數據），reader配置中， type是數據的類型， `json`代表JSON對象格式，rootProperty是使用對象中的哪一個鍵的值作為數據源。 完成以上代碼，在瀏覽器中刷新就可以看到效果了。 示例項目路徑： [https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app](https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app) ***** *****