Extjs6隨筆（終篇）——內容總結

上個月和Extjs說byebye了，之後大概也沒機會用了。以前的博客有點亂，你們看着比較麻煩，因此趁着我還沒忘，在這裏總結一下♪(^∇^*)

寫了個demo，傳到git上了，有須要能夠自取。Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）

本文基於ext-6.0.0

1、用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端的項目：

       

　　

2、在瀏覽器打開

• 轉到項目所在目錄下
• sencha app watch
• 在http://localhost:1841/，就能夠打開生成的項目。

　　具體能夠看Extjs6（一）——用sencha cmd創建一個ExtJs小項目 

　　

3、查看項目自帶例子代碼

• 因爲此次建的是隻有pc端的項目，因此咱們要寫的代碼基本都放在app文件夾中

　　

• 主頁面是Main.js，包含一個Tab切換。具體看 Extjs6（特別篇）——項目自帶例子main.js拆分詳解  

　　

• List.js是一個子頁面，包含一個列表，列表中的數據來自store/Personnel.js

　　

• MainController.js是主頁面的控制器，包含一些邏輯內容。

　　注：關於模型(Models)、視圖(Views) 、控制器(Controllers)，能夠看Extjs6官方文檔譯文——應用架構簡介（MVC，MVVM）（這個有點爛尾了，不過這點內容也仍是有用的⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）

4、登陸註銷

　　具體看  Extjs6（二）——用extjs6.0寫一個系統登陸及註銷 

　　          

 

5、寫一個border佈局的簡單頁面

• 頁面總體框架 

　　具體看  Extjs6（三）——用extjs6.0寫一個簡單頁面 

　　　　

• 子頁面（center部分）   

　　具體看   Extjs6（五）——寫一個包含toolbar、form、grid的子頁面

　　關於各類form還有個專題  Extjs6組件——Form你們族成員介紹

　　

 

6、側邊欄跳轉頁面

 　　具體看 Extjs6（四）——側邊欄導航根據路由跳轉頁面 

7、新建彈窗

　　邏輯看  用extjs6.0寫一個點擊新建窗口的功能

　   佈局參考  關於extjs表單佈局的幾種方式

　　

8、查詢功能

　　具體看  Extjs6（六）——增刪查改之查詢 （這裏還有一些get的總結）

9、刪除功能

　　具體看  Extjs6（七）——增刪查改之刪除

10、改bug心得

　　接觸Extjs半年多，感受最難的就是調試，一出錯就啥都不出來，下面算是一點改bug的當心得吧（看起來挺傻的）。

1. 逗號、括號有沒有缺的，是否是英文符號；
2. 頁面用到的組件是否引用了，路徑是否正確；
3. xtype是否對應正確；
4. 看network，接口請求是否正確，返回數據是否正確；
5. 注意組件各類設置參數都是什麼意思。

　　常常發生的就是這種小錯誤，其餘特殊狀況就要特殊對待了。

 END--------------------------------------------------------------------------------------

再貼一下代碼地址吧(*^▽^*) Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）