1. 程式人生 > >Extjs6.2系列之開發環境搭建

Extjs6.2系列之開發環境搭建

Extjs6.2環境的搭建跟Extjs4.2有所不同,sencha公司推出了shencha cmd這款工具可以方便的搭建一個Extjs Mvc專案。使用cmd的最直接的兩個好處就是可以生成程式碼框架和針對性的對你的ext專案編譯。你可以通過Sencha cmd的命令直接是生成一個應用框架,不必自己再寫app.js 等很多程式碼,想想就爽哈哈;Extjs功能強大,對很多的功能都進行了封裝,但是有許多功能我們都暫時都用不到,導致在4.2版本時即使是一個很小的專案都需要引入全部的extjs程式碼,網站就很笨重,在之後的版本中,Extjs通過Sencha cmd工具對js程式碼進行“編譯”只將你用到的功能程式碼提取出來形成一個“編譯”後的特殊版本,相當程度上優化了效能,減少了冗餘。Sencha cmd的使用方式在生成應用時會具體介紹。

一、下載sencha cmd 和 Extjs6.2

由於Extjs是商用軟體,想要免費的使用會有一些限制條件,但是學習者的我們先不用管這個。在下面的網址填寫你的一些資訊,會有郵件傳送到你的郵箱,郵件中就包含了下載連結,包括Extjs的壓縮包,cmd的壓縮包。

https://www.sencha.com/products/extjs/evaluate/  外國網站訪問可能會比較慢,筆者在這裡提供一個Extjs6.2版本壓縮包的百度雲連結(http://pan.baidu.com/s/1i5sQ4Cl)由於cmd會有使用者作業系統之分,筆者使用的是ubuntu,應該比較小眾,就不提雲盤供連結了,各位可以根據sencha的郵件連結下載。

二、安裝cmd,搭建第一個應用

http://docs.sencha.com/cmd/guides/extjs/cmd_app.html  這是官方給出的文件,本文以下部分也都基於官方文件。只是英文的文件可能有人不怎麼願意讀,我在下面簡單地給出步驟。

安裝好cmd,配置cmd的環境變數(這個過程我就不詳細講了,環境變數的配置過程自行百度),將下載好的extjs6.2解壓至硬碟任一位置,假如是D:/Extjs6.2.0 。

開啟命令列介面,執行如下指令:

sencha -sdk D:/Extjs6.2.0 generate app MyApp D:/MyApp
以上指令的含義為在 D:/MyApp目錄生成一個叫MyApp的專案,這個專案使用的Extjs庫為D:/Extjs6.2.0目錄下的Extjs。此專案就是一個Extjs專案的框架,裡面預先寫好了一個主頁面,你可以根據需要修改或者重寫,那麼要如何檢視這個生成的專案呢?
首先在命令列裡面轉到生成的MyApp所在的目錄(不會的同志自行百度cd命令)即 D:/MyApp,然後執行如下命令
sencha app watch 
如果上述步驟都沒有問題並且預設埠沒有被佔用,將會提示你可以開啟瀏覽器在網址欄輸入localhost:1841訪問該專案。如果此埠被佔用,命令列介面會提示並給出正確的埠號。 專案主頁效果如下


若最後專案程式碼編寫除錯完成,則使用如下命令進行“編譯”:

sencha app build
如果“編譯”過程沒有錯誤,則會在 MyApp所在目錄下的build檔案下生成最終的Extjs 專案程式碼,通常只有其檔案狹小隻有十幾兆,遠遠小於Extjs4.2時代數百兆的資料量。 PS:初寫部落格,內容難免有疏漏之出,還望多指正包含。本文屬於Extjs6.2系列,此係列將來會由更多的內容,筆者會逐步更新。