1.7 Ext JS開發基本環境準備與項目創建 · Ext JS開發大全

Ext JS是前端開發框架，其可以整合到后端，也可以獨立的作為前后端分離的前端。以上兩種架構，Ext JS前端都可以獨立開發，與后端整合時只需要切換數據源即可。這里為了簡化介紹，搭建一個不依賴后端的應用，重點放在前端項目的介紹上。本篇示例的環境及工具包括： 1. OS，Windows 10 , 64位 2. Sencha Cmd , 7.0.0.40 3. Ext JS SDK ,7.0.0 4. JDK 1.8 ## 需要的軟件和工具 #### Ext JS相關的文件和工具 Ext JS開發基本開發環境至少需要以下兩個部分: * Sencha Cmd：初始化項目、編譯項目或啟動項目的工具。這里使用Windows 64位的7.0版,下載的文件名是SenchaCmd-7.0.0.40-windows-64bit.zip。 * Ext JS SDK：開發工具包，包括Ext JS的源碼等。這里使用試用版，官方現在的文件名是 ext-7.0.0-trial.zip。這兩個文件可以到 https://pan.baidu.com/s/1Gmj6QZ2JJXrMg-J4mK7Bdw 中下載。 ## 工具安裝 #### JDK 安裝 Sencha Cmd需要JDK的支持，所以需要安裝JDK， JDK的版本使用 1.8 或11都可以，這里使用1.8。 #### Sencha Cmd 安裝解壓 SenchaCmd-6.6.0.13-windows-64bit.zip，解壓后的文件時.exe后綴的可執行文件，文件名是：SenchaCmd-7.0.0.40-windows-64bit.exe，雙擊安裝，一直下一步即可，其中可以選擇安裝目錄，這里安裝到 D:\install\Sencha\Cmd\7.0.0.40目錄下，設置頁面如下： ![](https://img.kancloud.cn/7b/0e/7b0e88bc453a712b1f1266b6cb84d5f0_620x514.png) 一直下一步安裝后，開啟一個命令行窗口，輸入`sencha `或是 `sencha help` 命令回車后會顯示當前的版本信息以及Sencha Cmd命令的幫助。 ![](https://img.kancloud.cn/f7/72/f7729b2eac16f16151c4cc08720e0854_1130x408.png) #### Ext JS SDK 解壓 Ext JS SDK不需要安裝，直接解壓即可。在使用Cmd創建項目的時候需要指定這個目錄。這里解壓到 `D:\install\ext7`。 ![](https://img.kancloud.cn/4c/1f/4c1f455ef77b4fc30e48fcd4defb6d1e_618x575.png) 解壓后的路徑結構如下： ![](https://img.kancloud.cn/07/a1/07a102a9466e567e6408f817c41ede36_987x661.png) ## 使用Sencha Cmd創建項目這里將項目創建到D:\demoworkspace\extjs 目錄中，項目名為Ext7Demo。創建步驟如下： 1. 建立目錄D:\demoworkspace\extjs\ext7-demo-app，新開命令行窗口，并切換到該目錄。 ``` d: cd D:\demoworkspace\extjs\ext7-demo-app ``` ![](https://img.kancloud.cn/53/c9/53c91984e46a64a9c29f3e3e4d9ee7a5_955x39.png) 2. 使用sencha generate 創建項目 ``` sencha -sdk D:\install\ext7 generate app Ext7DemoApp ./ ``` 對以上命令參數說明如下： 1. ·`-sdk D:\install\ext7 ` 指定Ext JS SDK的目錄 2. `generate app` 初始項目 3. `Ext7DemoApp` 項目的名稱，這個和項目的目錄名可以不一樣。項目名稱習慣使用駝峰法命名。（這里項目的目錄是ext7-demo-app）。這個項目名稱會反應在產生的代碼中。 4. `./` 項目代碼產生在當前路徑命令執行的頁面如下： ![](https://img.kancloud.cn/93/0f/930f426741ccbe56f6f6184cfe7f605e_1434x657.png) 執行完成后項目的目錄結構如下圖所示。 ![](https://img.kancloud.cn/77/34/7734f78e9dda2070b22b1c0a2fc73f3b_1010x625.png) ## 啟動項目 Web應用一般需要放入Web服務器中（比如Apache、Tomcat或IIS等），部署并啟動服務器后通過瀏覽器進行訪問。如果安裝了Node.js 則不需要部署到Web服務器，因為Node.js是基于 Chrome V8 引擎的 JavaScript 運行環境，看上去的效果是Node.js包含了一個Web服務器，同樣，安裝了Sencha Cmd，也可以直接通過相關的命令啟動應用并查看，不需要將應用部署到Web服務器。確保命令行窗口在 `D:\demoworkspace\extjs\ext7-demo-app`路徑下，輸入命令： ``` sencha app watch ``` 命令執行的輸入如下： ![](https://img.kancloud.cn/0d/c3/0dc320900467ba79ba099a964688f4c3_1109x443.png) 從以上輸出可以看到，應用啟動了，訪問的路徑是：` http://localhost:1841`。在瀏覽器中輸入這個地址，頁面效果如下： ![](https://img.kancloud.cn/e5/ec/e5ec2dc424339b86f1ac12342ec6cf8c_1483x575.png) ## 項目說明通過Cmd可以快速創建的一個項目的腳手架，這里創建的項目包括經典(classic)和現代（modern）兩種模式，關于classic和modern后面會介紹。這兩種模式可以使用參數訪問，經典模式可以不需要加參數（默認），也可以帶上參數： ``` http://localhost:1841?classic ``` 現代模式訪問通過如下地址： ``` http://localhost:1841/?modern ``` ***** *****