將Ext JS 5應用程式匯入Web項目以及實現本地化，extweb

將Ext JS 5應用程式匯入Web項目以及實現本地化，extweb

在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和app\application.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檔案中這兩個檔案的路徑就行了。