常規功能和模組自訂系統 (cfcmms)—013給Extjs6加入多介面主題(Theme)

常規功能和模組自訂系統 (cfcmms)—013給Extjs6加入多介面主題(Theme)
常規功能和模組自訂系統 (cfcmms)—013給Extjs6加入多介面主題(Theme)
　　在用sencha命令建立的Extjs6項目中只能使用一種介面主題(Theme)，如果要換一個介面風絡需要重新修改app.json中的theme配置項，然後再用cmd命令重新編譯產生。經過一段時間的研究，發現是可以在用cmd命令編譯的時候產生多種Theme，我們需要在index.html中加一些代碼來指定使用哪個Theme。 　　第一步，修改app.json，在檔案的最後部有關於builds配置項的說明，把下面這段代碼加進去。

    builds: {      classic: {       theme: theme-classic        },       gray : {      theme : theme-gray      },      aria: {      theme: theme-aria      },                    neptune : {      theme: theme-neptune      },        crisp :{      theme: theme-crisp      },       triton: {      theme: theme-triton      }  },

　　還要在app.json中找到bootstrap配置項，加入一行配置後如下：

    bootstrap: {        base: ${app.dir},        microloader: bootstrap.js,        manifest: ${build.id}.json,        css: bootstrap.css    },

　　在output配置項中加入resources配置

    output: {        base: ${workspace.build.dir}/${build.environment}/${app.name},        appCache: {            enable: false        },        resources: {          path: ${build.id}/resources,          shared: resources        }    },

　　修改好以上三項後，儲存app.json。然後用 sencha app build development 來重建開發環境。編譯完成後,會發現在build/development/app 目錄下多出來一些檔案夾，這些檔案夾分別是各種Theme的資源檔；在WebContent下面也多出了相應的Theme的設定檔，如triton.json、neptune.json等，如：
　　至此第一步完成，下一步需要修改index.html，使其可以根據網址的參數來決定用哪一個Theme。開啟index.html，將其注釋掉的一段script修改一下。

<script type=text/javascript>var Ext = Ext || {};Ext.beforeLoad = function(tags) {var theme = location.href.match(/theme=([w-]+)/);theme = (theme && theme[1]) || 'crisp';console.log('載入系統主題方案:' + theme);Ext.manifest = theme + '.json'; };</script><script id=microloader data-app=e8b92f93-ab34-4781-ab41-b4b0f2a7d2c0type=text/javascript src=bootstrap.js></script>
　　至此，已經可以在開發模式下使用不同的Theme了。樣本如下：



　　如果沒有指定theme，則會使用預設的triton。這是開發環境下的多介面主題的使用，如果你不想把改變theme加在網址中，也可以存在cookies中，自己做一個更改主題的控制項，修改主題後將其存在cookies中，再啟動的時候讀取cookies就可以了。 　　發布模式下的使用方式和這個基本相同，但是還有最後一個問題沒有解決。各個[theme.json]檔案不能自動產生。現在只能將app.json檔案拷貝後，改成各個theme的檔案，然後在裡面稍微改一下配置資訊即可。 　　如果有人知道如何產生發布模式下的各個json檔案，麻煩告知。