上個月和Extjs說byebye了，以后大概也沒機會用了。之前的博客有點亂，大家看着比較麻煩，所以趁着我還沒忘，在這里總結一下♪(^∇^*)
寫了個demo，傳到git上了，有需要可以自取。Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）
本文基於ext-6.0.0
一、用sencha cmd建立一個ExtJs小項目
- 首先，需要一個命令行工具。進入extjs所在目錄。
- 然后，輸入：sencha -sdk [ExtJs6.0文件夾地址] generate app [項目名稱] [項目路徑]
- 例如：sencha -sdk ext-6.0.0 generate app MaiJiangDou JiangDou
(注)：還可以加--classic或--modern建立pc或WAP單獨項目
下圖建了一個只有pc端的項目：
二、在瀏覽器打開
- 轉到項目所在目錄下
- sencha app watch
- 在http://localhost:1841/，就可以打開生成的項目。
具體可以看Extjs6（一）——用sencha cmd建立一個ExtJs小項目
三、查看項目自帶例子代碼
- 由於這次建的是只有pc端的項目，所以我們要寫的代碼基本都放在app文件夾中
-
主頁面是Main.js，包含一個Tab切換。具體看 Extjs6（特別篇）——項目自帶例子main.js拆分詳解
-
List.js是一個子頁面，包含一個列表，列表中的數據來自store/Personnel.js
- MainController.js是主頁面的控制器，包含一些邏輯內容。
注：關於模型(Models)、視圖(Views) 、控制器(Controllers)，可以看Extjs6官方文檔譯文——應用架構簡介（MVC，MVVM）（這個有點爛尾了，不過這點內容也還是有用的⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）
四、登錄注銷
具體看 Extjs6（二）——用extjs6.0寫一個系統登錄及注銷
五、寫一個border布局的簡單頁面
- 頁面整體框架
具體看 Extjs6（三）——用extjs6.0寫一個簡單頁面
- 子頁面（center部分）
具體看 Extjs6（五）——寫一個包含toolbar、form、grid的子頁面
關於各種form還有個專題 Extjs6組件——Form大家族成員介紹
六、側邊欄跳轉頁面
七、新建彈窗
布局參考 關於extjs表單布局的幾種方式
八、查詢功能
具體看 Extjs6（六）——增刪查改之查詢 （這里還有一些get的總結）
九、刪除功能
十、改bug心得
接觸Extjs半年多，感覺最難的就是調試，一出錯就啥都不出來，下面算是一點改bug的小心得吧（看起來挺傻的）。
- 逗號、括號有沒有缺的，是不是英文符號；
- 頁面用到的組件是否引用了，路徑是否正確；
- xtype是否對應正確；
- 看network，接口請求是否正確，返回數據是否正確；
- 注意組件各種設置參數都是什么意思。
經常發生的就是這種小錯誤，其他特殊情況就要特殊對待了。
END--------------------------------------------------------------------------------------
再貼一下代碼地址吧(*^▽^*) Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）