基于SenchaCmd搭建ExtJS 6.2版本開發環境

因為各種原因，需要在extjs項目中開發點新功能，由于之前沒好好接觸過extjs，我前端領域主要學的是React技術棧。所以開始找資料搭建ExtJs運行環境。

說一段小插曲，由于看見extjs項目下有index.html文件，于是，在webstorm工程中用瀏覽器打開index.html文件，試圖把項目跑起來，在瀏覽器中打開index.html的時候，是一片空白，活生生的打臉了。我潛意識的意識到，跑項目肯定需要搭建extjs的開發環境的。然而我也不知道需要用什么工具來搭建，沒有關鍵字，搜索百度也是徒勞。我在項目代碼中偶然看見了SenchaCmd這個關鍵字，于是百度下來，就能順利找到資料了，知道要安裝好SenchaCmd。

大家需要學習ExtJS可以上中文網站 http://extjs.org.cn/ 看這本書：《ExtJS 6.2實戰》

• 安裝Cmd: SenchaCmd-6.7.0.63-windows-64bit

• 安裝SDK：ext-6.2.0-gpl

解壓SenchaCmd-6.7.0.63-windows-64bit和ext-6.2.0-gpl

安裝SenchaCmd-6.7.0.63-windows-64bit，記住安裝位置目錄，我這里安裝的目錄地址是

C:\Users\Arison\bin\Sencha\Cmd

window cmd切換到C:\Users\Arison\bin\Sencha\Cmd目錄下，執行命令

sencha help

如果顯示如圖所示，就代表安裝成功

為什么要配置系統環境變量呢？為了接下來運行項目的命令不會報錯。

運行項目的命令：sencha app watch

新建系統變量：EXTJS_CMD_HOME

路徑就是：C:\Users\Arison\bin\Sencha\Cmd

編輯系統變量Path

新建環境變量：%EXTJS_CMD_HOME%

在路徑C:\Users\Arison\bin\Sencha\Cmd下創建項目：

sencha -sdk [解壓后的ext-6.2.0的位置] generate app [項目名稱] [項目地址]

創建項目 extjsDemo

extjsDemo是我隨便取的項目名。

sencha -sdk C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0  generate app extjsDemo C:\Project\ext

項目路徑執行：

sencha app watch

在你創建的ExtJs項目目錄下執行命令：

默認訪問路徑是：http://localhost:1841 如果你執行了多個extjs項目，端口會隨機變化！

項目運行如下：

然后我在sdk自帶的項目目錄下ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard

執行命令sencha app watch運行sdk自帶的demo工程

然后根據命令行提示，找到訪問路徑：http://localhost:57346

這是Ext JS Examples項目，項目路徑位于：

ext SDK ext-6.2.0目錄下的templates下的admin-dashboard

C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard

用WebStorm打開項目，項目目錄文件結構如下：