【extjs6学习笔记】1.16 初始: 关于主题

打开app.json,里面有主题设置

   

主题说明

theme-base

这个包是所有其他主题的基础主题,是唯一没有父主题的主题。 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则。 "theme-base"中的样式规则在派生主题中不可配置。 您应该避免覆盖由此主题创建的任何样式规则。

theme-neutral

theme-neutral扩展了"theme-base",并且包含绝大多数可配置的风格规则。 可用于配置Ext JS组件外观的大多数变量都在"theme-neutral"中定义。 这些是您的自定义主题可以覆盖的变量。

theme-neptune

现代(Modern)的没有边框(border)的主题,扩展"theme-neutral"

theme-neptune-touch

theme-neptune-touch是用于触摸的主题. 继承自 "theme-neptune",这个主题包括在平板电脑上使用的"touch-sizing"包

theme-triton

使用字体图标的(font-icons)现代(Modern)主题. 继承自 "theme-neptune"

theme-crisp

简约主题。扩展"theme-neptune".

theme-crisp-touch

基于theme-crisp的触摸主题。 扩展"theme-crisp"。 这个主题包括在平板电脑上使用的"touch-sizing"软件包

theme-classic

经典的蓝色Ext JS主题。 扩展"theme-neutral"

theme-gray

灰色主题。扩展 "theme-classic".

theme-aria

辅助功能主题。 扩展"theme-neptune"。 这个主题包括"aria"包

   

来自 <http://docs.sencha.com/extjs/6.0.2/guides/core_concepts/theming.html>

   

   

创建自己的主题

   

在工作空间目录下执行

sencha -sdk ext generate theme --extend theme-triton theme-cmcc

生成文件在工作空间目录的ext/packages/theme-cmcc目录下

   

应用

修改app.json文件

   

更改主题内容,只需运行sencha app watch并在URL中添加以下参数

?platformTags=fashion:true

   

修改

$base-color:dynamic(#122b3f);

$body-background-color:dynamic(#10364d);

   

效果:

   

说明:

背景看着没起作用,其实是让上层元素挡住了【修改panel.scss-->$panel-body-background-color:dynamic(transparent);可以解决

   

参考:

http://docs.sencha.com/extjs/6.5.0/classic/Global_CSS.html

http://extjs.org.cn/node/762

   

   

   

posted @ 2017-06-13 15:00  宁#宁  阅读(902)  评论(0编辑  收藏  举报