使用Ext JS社群版的快速模版：包（packages）與工作區（workspace）

摘要： 基本概念 對於包，簡單來說就是能用於多個應用程式的共享程式碼，如模型（model）、儲存（Store）的定義，有關包的詳細資訊，可參閱文章《 Sencha Cmd Packages 》。 工作區不是必需的，但使用它來管理應用程式、包和其他共享程式碼是個不錯的選擇。有關工作區的詳...

基本概念

對於包，簡單來說就是能用於多個應用程式的共享程式碼，如模型（model）、儲存（Store）的定義，有關包的詳細資訊，可參閱文章《 Sencha Cmd Packages 》。

工作區不是必需的，但使用它來管理應用程式、包和其他共享程式碼是個不錯的選擇。有關工作區的詳細資訊，可參閱文章《 Workspaces in Sencha Cmd 》。

使用工作區一定要小心，在一個工作區內只能使用一個版本的Ext JS框架，如第一次建立的應用程式所使用的框架版本是6.2，那以後在該工作區使用Sencha Cmd建立的應用程式都將使用6.2版本這個框架，而使用NPM Tools建立的應用程式則不受此限制，原因是NPM Tools建立的應用程式使用的node_modules中的框架，而不是workspace的框架。

由於NMP Tools建立的應用程式不受工作區的管理，這就為應用程式引用包帶來了困難，這可通過 mklink 命令視窗目錄聯接來解決。

開發環境

作業系統：Window 10

開發工具：Visual Studio Code

Sencha Cmd： 6.6.0.13

ExtGen ：Sencha ExtGen v1.0.2 Community Edition

建立工作區

sencha gen work ./client

命令執行完後，會在資料夾內新增一個名為 workspace.json 的檔案，具體內容如下：

{
/**
* An object containing key value pair framework descriptors.
*
* The value should be an object containing "path" the path inside the workspace where the framework
* files can be found and "version" the version of the framework. For example:
*
*"frameworks": {
*"ext": {
*"path": "ext",
*"version": "n.n.n.n"
*},
*"extnew": {
*"path": "extnew",
*"version": "n.n.n.n"
*}
*}
*
* You can exclude the directories that contain the framework from source control and later restore them
* with "sencha workspace install". See "sencha help workspace install" for more information.
*
*/
"frameworks": {
},

/**
* This is the folder for build outputs in the workspace.
*/
"build": {
"dir": "${workspace.dir}/build"
},

/**
* These configs determine where packages are generated and extracted to (when downloaded).
*/
"packages": {
/**
* This folder contains all local packages.
* If a comma-separated string is used as value the first path will be used as the path to generate new packages.
*/
"dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",

/**
* This folder contains all extracted (remote) packages.
*/
"extract": "${workspace.dir}/packages/remote"
}
}

從註釋可以瞭解到，在該檔案主要定義了該工作區所使用的框架、生成目錄和包目錄。

使用6.2版本建立一個桌面應用程式

在VS Code終端視窗中，使用 cd 命令進入client資料夾，然後執行以下命令建立一個桌面應用程式：

sencha -sdk D:\Workspace\ext6\ gen app -ext -classic Admin ./Desktop62

以上程式碼 sdk 引數指定了框架的路徑， gen app 表示要建立一個應用程式，引數 ext 和 classic 表示要建立的是桌面應用程式，應用程式的名稱空間為 Admin ，存放路徑為 Desktop62 。

應用程式建立後，為了測試一下效果，需要在專案根目錄建立一個名為 .vscode 的資料夾，然後在裡面新增名為 iisexpress.json 的檔案，具體程式碼如下：

{
"port": 4200,
"path": "d:\\Workspace\\Javascript\\qTemplate-ExtJS-CE\\src\\client\\",
"clr": "v4.0",
"protocol": "http"
}

以上程式碼中，需要注意的是路徑的設定，這裡沒有將訪問路徑直接設定為 Desktop62 ，是因為生成路徑是在工作區的 build 資料夾，而不是在 Desktop62\build 資料夾，這樣，應用程式在除錯時，如果要訪問打包後的樣式檔案，就必須從工作區的 build 資料夾獲取檔案，而要能訪問工作區的 build 資料夾，則必須將網站根目錄設定為工作區所在資料夾，而不是具體專案的資料夾。

檔案 iisexpress.json 建立後，就是按下 CTRL+SHIFT+P 開啟VS Code命令視窗，選擇 IIS Express: Start Website 來訪問開啟網站了，將訪問地址調整為 http://localhost:4200/desktop62/ 就能訪問到應用程式了。

要建立包，需要使用以下命令：

sencha generate package foo

以上命名中， foo 為包的名字。

在本專案中，需要建立以下包：

• Common.Classic：用於Classic工具包的共享類
• Common.Modern：用於Modern工具包的共享類
• Common.Core：同時適用於Classic和Modern的共享類
• Common.Data：用來定義該專案的模型、儲存等資料類
• Locale：用來存放本地化檔案

在桌面應用程式中引用包

要在桌面應用程式中引用上面建立的包，相當簡單，只要開啟應用程式的 app.json 檔案，然後在 requires 中新增以下引用就行了：

"Locale",
"Common.Core",
"Common.Classic",
"Common.Data"

本地化包

對於本地化包，不能將指令碼放在 src 資料夾中，而是要放在 resources 資料夾中，原因是對於本地化包，只需要做一次複製就行了，不需要作為類打包到應用程式中。

下面把原有的快速模版中的本地化包的檔案複製到 Locale\resoutces 資料夾中。

由於在最新版本的Modern工具包中，也採用了重寫的方式來實現本地化，因而需要在 init 方法內判斷當前應用程式使用的是那個工具包，然後再執行具體的重寫操作。在本專案內，框架版本號為6.2的，使用的Classic工具包，而使用6.x(x>2)的都是使用Modern工具包，因而可通過判斷框架的版本號來決定執行那個本地化重寫方案，具體程式碼如下：

init: function (profile) {
document.title = I18N.AppTitle;
var minor = Ext.getVersion().minor;
if(minor > 2)
this.initPhone();
else
this.initDesktop();

} ,//init

程式碼中的 Ext.getVersion().minor 就用於獲取框架的次版本號，當該值大於2時，則使用Modern的本地化方案，否則使用Classic的本地化方案。

在桌面應用程式中執行生成命令 sencha app build -dev 後，會發現本地化檔案已被複制到 client\build\development\Admin\resources\Locale 資料夾。知道怎麼訪問本地化檔案就可以在應用程式的 index.html 內新增如下對本地化檔案的請求程式碼了：

var defaultLang = (navigator.language || navigator.userLanguage).replace('-', '_'),
locale=location.href.match(/lang=([\w-]+)/),
LANG = (locale && locale[1]) || defaultLang;
document.write('<script src="../build/development/Admin/resources/locale/'+ LANG+'.js" type="text/javascript"><\/script>');

以上程式碼會判斷url是否帶有語言設定，如果沒有，則使用瀏覽器預設語言作為本地化語言。

要執行框架本地化重寫，還需要在 app.js 的頂部新增以下程式碼：

Ext.onReady(function(){
I18N.init();
});

以上程式碼會在框架初始化完成後，應用程式沒有執行前，呼叫本地化檔案的init方法實現本地化重寫。

對應用程式執行一次生成命令 sencha app build -dev 後，就可重新整理瀏覽器頁面，在網路面板中檢查本地化檔案是否已經載入了。如果本地化檔案已經載入，在控制檯中執行以下程式碼：

Ext.MessageBox.alert('測試','測試');

如果彈出視窗中的 ok 按鈕已經轉換為本地化文字，那說明本地化已經實現了。