在Ext JS 5,使用了新的指令碼和樣式載入方式,這對於將應用程式匯入到Web專案中產生了點小麻煩。而對於本地化檔案的匯入,也採用了新的方式,本文將一一解答這些問題。

將Ext JS 5應用程式匯入Web專案

在Ext
JS
5,會使用bootstrap.js來載入應用程式指令碼和樣式,而bootstrap.js是根據Bootstrap.json來載入樣式檔案和指令碼的。
問題就在這個Bootstrap.json檔案上,如果是使用IIS的Web專案,首先會碰到的問題是Web伺服器不允許下載JSON檔案,這時候,就得
先解決這個問題,不然載入肯定會出錯。

如果認真研究一下bootstrap.js檔案,會發現它主要用來獲取指令碼和樣式檔案的地方是
Bootstrap.json中的js和css成員值。在自動生成的Bootstrap.json檔案中,指令碼和樣式檔案的預設路徑就是沒有路徑,也就是
與首頁檔案是同一路徑,這樣,當首頁檔案與指令碼和樣式檔案不在同一路徑,就載入不了指令碼和樣式了。由於Bootstrap.json檔案中要載入的指令碼文
件很多,要直接修改Bootstrap.json檔案中的檔案的路徑,不太現實。那就只能在bootstrap.js檔案中找尋解決方案了。

在bootstrap.js檔案中,Ext.Microloader的load方法會讀取Bootstrap.json中的js和css成員的值,然後將這些值通過以下語句將指令碼和樣式檔案的載入路徑放到一個陣列內:

urls.push(resource.path);


上語句並沒有對指令碼或檔案的路徑進行任何修改,直接就放到載入陣列裡了,這樣在首頁檔案與指令碼不在同一路徑的時候肯定會出錯,因而,要修正這個問題,只要
修改這句就行了,也就是為要載入的指令碼和樣式加上一個合適的路徑。再研究下bootstrap.js檔案,會發現在Boot的init方法中,會把
bootstrap.js在首頁中的路徑儲存在Boot.baseUrl中,而bootstrap.js的路徑是與bootstrap.json的路徑是相同的,也就是說bootstrap.json中要載入的指令碼和樣式的相對路徑與bootstrap.js的相對路徑是一樣的,因而,將上面的程式碼修改為以下程式碼就能正確載入指令碼和樣式了:

urls.push(Boot.baseUrl + resource.path);


上只是解決了Ext JS的框架檔案和樣式的路徑,對於應用程式本身的類檔案來說,他們的路徑還是錯誤
,而要修正這個錯誤,很簡單,只需要在app.js和appapplication.js中新增appFolder來指定應用程式等待名稱空間的路徑就
行了,例如,指令碼是放在Web專案的Scripts目錄的,則程式碼如下:

appFolder : `scripts/app`,

經過以上修改,就可以將應用程式正確的匯入Web專案了。

本地化

由於採用了bootstrap.js檔案來啟動應用程式,因而不建議再採用之前的直接在頁面中載入本地化檔案的方式來載入本地化檔案,而且,這樣的載入方式還存在先載入應用程式,再載入本地化檔案的載入順序問題,可能會出現意想不到的錯誤。

在Ext
JS
5,要正確加入本地化檔案,需要修改app.json檔案,在app.json的requires成員陣列中新增ext-locale,意思就是應用程式
要求載入本地化包,但沒具體說要載入那個本地化包,因而,還需要新增locale成員,來指定需要載入哪個本地化包,如果只載入簡體包,值可以是
zh_CN,如果要載入多個本地化包,則值可以是陣列,將本地化包的特徵程式碼加入其中,具體例子如下:

    "requires": [
		`ext-locale`
    ],
	"locale": "zh_CN",

修改app.json檔案之後,還需要執行一次sencha app build命令才能實現本地化。

釋出

應用程式使用sencha app build命令打包後,還是會存在路徑問題。這時候,bootstrap.js檔案會以壓縮形式放在首頁裡,要修改它不太容易,但這時候bootstrap.js會以app.json為指令碼檔案和樣式檔案的載入依據,而這時候的app.json檔案只需要兩個一個指令碼檔案app.js和一個樣式檔案MyApp-all.css,因而直接修改app.json檔案中這兩個檔案的路徑就行了。