一、 初識ExtJS
這是個前端框架，但是作為后端人員。要完成從前到后的完整開發，也需要掌握一些前端的知識。本教程基於ExtJS的6.2 版本進行學習。
前面的過程已經能夠成功創建並且運行一個demo了。那么要了解就需要知道生成的文件中都有哪些東西以及都有什么作用。
生成的文件目錄如下：
1. .sencha/ # 特定文件，例如配置
2. app/ # 應用程序內容配置文件夾 3. sencha.cfg # app生成等相關配置 4. build-impl.xml # 標准生成腳本 5. plugin.xml # 插件配置 6. workspace/ # 解決方案（工作空間）配置文件夾 7. sencha.cfg # 解決方案級別配置 8. plugin.xml # 解決方案級別插件配置 9. 10. ext/ # 拷貝過來的extjs SDK 11. cmd/ # 12. sencha.cfg # 框架制定內容配置 13. packages/ # 框架的功能包，如主題包和本地話js功能包 14. ext-theme-classic/ # 15. ext-theme-neptune/ # 16. ... # 17. src/ # sdk源文件 18. ext-*.js # 其他壓縮包文件 19. ... 20. 21. index.html # app入口文件 22. app.json # app的配置文件 23. app.js # app入口邏輯 24. app/ # MVC模式的主要應用程序部分 25. model/ # 26. store/ # 27. view/ # 28. Main.js # 默認的view 29. controller/ # 30. MainController.js # 默認的controller 31. 32. packages/ # Sencha Cmd 功能包包放的地方 33. 34. build/ # 編譯后的文件
二、 代碼編輯ExtJS
1、 我這里使用java比較多，所以就直接在Eclipse上面進行了代碼的編輯工作。打開eclipse，進入eclipse marketplace，搜索sencha，安裝Sencha Exclipse Plugin
2、 新建一個項目
3、導入項目：
將現有文件（Snowy）拷進eclipse的workspace或直接右鍵導入項目
4、 在Eclipse運行一個項目
不過需要注意的是，使用eclipse的Extjs插件需要在對方官網上注冊賬號，而這個官網奇葩的是官網必須翻牆才能注冊。
四、 生成模板ExtJS
生成實例模板命令：
sencha -sdk D:/ext-6.5.2 generate app -s D:/ext-6.5.2/templates/admin-dashboard App I:/App-6.5.2
生成實例命令：
sencha -sdk D:\Project-area\ext-6.2.0 generate app -s
D:\Project-area\ext-6.2.0\templates\admin-dashboard App D:\Project-area\MM
使用ExtJS可以生成多種多樣的模板。而這里我將學習的是基於官方的admin-dashboard 模板而生成的樣式。
前面我們提到過的使用 CMD命令行：
sencha -sdk [解壓后的ext-6.2.0的位置] generate app [項目名稱] [項目地址]
進行項目生成，但是這樣生成的並不是我想要的，他只能生成一個空白的模板。但是我想要的是
這種模板，那么就需要使用官方的admin-dashboard 模板。
而生成原理就相當於 給你一篇文章，自己去復印店用復印機復印一下就行。而cmd工具就是那個復印機、
下面長話短說直接說如何生成：
1、 創建模板
打開cmd 輸入如下語句
sencha -sdk D:\Project-area\ext-6.2.0 generate app -s D:\Project-area\ext-6.2.0\templates\admin-dashboard App D:\Project-area\MM
解釋：
D:\Project-area\ext-6.2.0 ----》SDK路徑。
D:\Project-area\ext-6.2.0\templates\admin-dashboard ----》SDK內admin-dashboard模板的路徑。
D:\Project-area\MM----》要生成的項目的項目存放路徑
2、 但是只是按照上面的方式進行創建並在MM文件夾內，使用sencha app watch 命令得到的界面加載不出來css樣式。所以需要進行如下修改。
a) 修改app.json的output路徑
"output": {
2. /*"base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",*/
3. "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}", 4. "page": "../index.html", 5. "manifest": "../${build.id}.json", 6. "appCache": { 7. "enable": false 8. } 9. },
b) 引入中文的編輯
"requires": [
4、 "charts", 5、 "font-awesome", 6、 "ux", 7、 "ext-locale" 8、 ], 9、 "locale":"zh_CN",
3、 打開cmd 進入項目文件夾下 重新對項目進行build
Sencha app build classes
4、 使用命令sencha appwatch運行即可