extjs 修改官方主题

1、在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme)，如果要换一个界面风络需要重新修改app.json中的theme配置项，然后再用cmd命令重新编译生成
方法一：修改app.json，在文件的最后有关于builds配置项中的theme

最后打开index.html就是修改后的样式。
方法二：方法二是在网上看到的比较快捷的方法，可以快速看到所有的主体，但因为时间紧急，这个方法我还没有实践，等有时间了试一下这个方法。
第一步，修改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修改一下。
[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了。示例如下：

extjs 修改官方主题相关推荐

【首发】根据壁纸修改App主题，它真的来了
1.前言曾经产品经理的奇思妙想,现在终于可以实现了- 2.效果效果中,原本是红色壁纸对应的红色App主题,在改成绿色壁纸之后,App主题也相应的变成绿色了. 模拟器演示略微小卡- 3.介绍这个效 ...
十五、Typora官方主题 + 自定义主题
十五.Typora官方主题 + 自定义主题 1.下载官方主题 2.在官方主题的基础上自定义 1.下载官方主题首先去Typora官网下载自己喜欢的主题:官方主题下载例如我这里选择 Vue 我们只用到 ...
extjs学习—-官方模版注释2
简介:这是extjs学习--官方模版注释2的详细页面,介绍了和javascript,有关的知识.技巧.经验,和一些javascript源码等.这次是一些弹出框.自己将官方的看了几遍,重写了下.其实也差 ...
修改WordPress主题导致整个站点404无法访问
今天下午发现自己用WordPress搭建的站点www.hainter.com的主题有一些bug,决定对其进行一些修改. 由于主题原先并不是自己设计的,是在知更鸟的Ality主题基础上修改的,所以对于里 ...
超级好看的14 款 Chrome 官方主题，有你喜欢的吗？
今天给大家安利 14 款颜值绝绝子的 Chrome 官方主题,均由 Chrome 官方团队出品.个人强推第一款海洋绿,拉升逼格. 1.海洋绿 2.经典蓝 3.午夜黑 4.玫瑰金 5.深蓝 6.石板蓝 ...
python界面颜色设置_pycharm修改界面主题颜色的方法
pycharm修改界面主题颜色的方法更新时间:2019年01月17日 09:53:27 作者:转身及不见今天小编就为大家分享一篇pycharm修改界面主题颜色的方法,具有很好的参考价值,希望对大家 ...
【skills】sublime text 3 自定义修改颜色主题配色方案
因为自带的主题是存储在 C:\Users\lenovo\AppData\Local\Sublime Text 3\Cache\Color Scheme - Legacy 对应 preference - ...
颜值绝绝子的 14 款 Chrome 官方主题 !
点击上方"Java基基",选择"设为星标" 做积极的人,而不是积极废人! 每天 14:00 更新文章,每天掉亿点点头发... 源码精品专栏原创 | Java ...
vue+vite+element-plus修改全局主题颜色
vue3+vite+element-plus修改全局主题颜色新建修改全局的样式文件配置vite.config.ts文件修改APP.vue 最近在研究Vue3+vite+element-plus项 ...

extjs 修改官方主题

extjs 修改官方主题相关推荐

最新文章

热门文章