extjs 修改官方主題
阿新 • • 發佈：2019-02-19
1、在用sencha命令建立的Extjs6專案中只能使用一種介面主題(Theme)，如果要換一個介面風絡需要重新修改app.json中的theme配置項，然後再用cmd命令重新編譯生成
方法一：修改app.json，在檔案的最後有關於builds配置項中的theme
最後開啟index.html就是修改後的樣式。
方法二：方法二是在網上看到的比較快捷的方法，可以快速看到所有的主體，但因為時間緊急，這個方法我還沒有實踐，等有時間了試一下這個方法。
第一步，修改app.json，在檔案的最後部有關於builds配置項的說明，把下面這段程式碼加進去。
"builds": {
"classic" 還要在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.json。然後用 sencha app build development 來重新生成開發環境。編譯完成後,會發現在build/development/app 目錄下多出來一些資料夾，這些資料夾分別是各種Theme的資原始檔；在WebContent下面也多出了相應的Theme的配置檔案，如triton.json、neptune.json等，如下圖：
至此第一步完成，下一步需要修改index.html，使其可以根據網址的引數來決定用哪一個Theme。開啟index.html，將其註釋掉的一段script修改一下。
[javascript] view plaincopy
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>app</title>
<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-b4b0f2a7d2c0"
type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html> 至此，已經可以在開發模式下使用不同的Theme了。示例如下：
