界面排版花了很长时间才知道Ext.NET的主题是可以修改的,学习记录一下。
1. 项目中更改主题
可以通过修改项目目录下的 app.json
文件或者Web.config配置文件,更新为使用不同主题,使用不同的界面风格。例如下图中修改Web.config
主题风格和类相似,具有层级(继承)结构。
Neptune 扩展至 Neutral,而自定义风格通常扩展至 Neptune 和 Classic。
默认主题(Default)是经典主题 Gray,也可以theme =“X ” X∈( Neptune, Aria, CrispTouch, NeptuneTouch)
2. 主题高级定制
自 Ext JS 4 开始,可以针对全局或单个组件修改颜色、渐变、字体等主题元素。
Ext JS 使用 SASS (一个 CSS 扩展) 和 COMPASS ( 一个 SASS 框架,基于 Ruby) 来处理样式。
修改组件风格
例如要修改 Ext.toolbar.Toolbar 的风格。注意文件的层级结构,Ext 对应 ext/packages/sass/var,toolbar 对应 toolbar 目录,而 Toolbar 对应最终文件 Toolbar.scss:
$ mkdir scss/var/toolbar
$ touch scss/var/toolbar/Toolbar.scss
内容为:
$toolbar-background-color: rgba(188,188,188,1);
$toolbar-background-gradient: recessed;
添加新的渐变效果
Ext 已经内置有 matte, glossy, bevel, recessed 等效果。
添加新的渐变:
- 在文件
ext/packages/my-custom-theme/sass/etc/all.scss
中加入:
@import 'mixins'; /* 导入 mixins.scss 文件 */
- 创建文件
ext/packages/my-custom-theme/sass/etc/mixins.scss
文件,内容为:
/* 导入 mixins/background-gradient.scss 文件 */
@import 'mixins/background-gradient';
- 创建文件
ext/packages/my-custom-theme/sass/etc/mixins/background-gradient.scss
文件,内容为:
@function linear-gradient-recessed ($direction, $bg-color) {
@return linear-gradient(left, color_stops(#fbb040, #cccccc));
}
将 ext/packages/my-custom-theme/sass/var/toolbar/Toolbar.scss
内容改为:
/*$toolbar-background-color: rgba(188,188,188,1); */
$toolbar-background-gradient: recessed;
重新编译主题后可看到工具栏中的 recessed 的渐变已经被我们定义的覆盖了。
修改 Tab 的风格
Ext.tab.Tab
对应的主题文件是 ext/packages/my-custom-theme/sass/var/tab/Tab.scss
。
内容为:
/* Tab Custom style for my-custom-theme */
$tab-base-color: #65a9e0; /* Tab 普通情况下的基本色(背景色) */
$tab-base-color-active: #c5c5c5; /* 激活情况下的背景色 */
$tab-base-color-disabled: #597179; /* 禁用情况下的背景色 */
$tab-color-active: #333333; /* 激活情况下的文本色 */
添加自定义字体
获取字体的常用网站有 [Google Fonts] 和 FONT Squirrel。
在 FONT Squirrel 的 OPEN SANS 页上下载 @FONT-FACE KIT,里面包含字体文件及相关的 CSS 文件。在 ext/packages/my-custom-theme/resources/
下创建目录 fonts/open-sans
,并将下载下来的压缩包中的 web fonts/opensans_regular_macroman 目录下的文件复制到 open-sans 目录。
将复制来的文件 stylesheet.css 中的内容复制到 ext/packages/my-custom-theme/sass/var/Component.scss
,修改相对路径并添加 $font-family: open_sansregular;
,如下:
/* file: ext/packages/my-custome-theme/sass/var/Component.scss */
/* My Custom Theme SCSS Component file */
@font-face {
font-family: 'open_sansregular';
src: url('../resources/fonts/open-sans/OpenSans-Regular-webfont.eot');
src: url('../resources/fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../resources/fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
url('../resources/fonts/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../resources/fonts/open-sans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
$font-family: 'open_sansregular';
$color: #6d6d6d !default; /*theme font/text color */
$base-color: #0d7179 !default; /*all component color base */
相同组件呈现不同风格
Ext 的每个组件都有 ‘ui’ 属性,用来为 CSS 类添加前缀。
假设定义了一个 Panel 如下:
{
xtype: 'panel',
ui: 'featuredpanel',
frame: true,
height: 200,
margin: '0px 5px 0px 5px',
title: 'Featured',
bodyPadding: 4,
html: 'Place contents for FEATURED zone',
tools: [
{
xtype: 'tool',
type: 'prev'
},{
xtype: 'tool',
type: 'next'
}
]
}
为 Ext.panel.Panel
创建自定义 ui 风格,先在 ext/packages/my-custom-theme/sass/src
目录下创建 panel
目录,并创建文件 Panel.scss
,内容如下:
/* 应用于 ui: 'featuredpanel' 的 panel */
@include extjs-panel-ui(
$ui:'featuredpanel',
$ui-header-background-color: #5e1b5e,
$ui-border-color: #5e1b5e,
$ui-header-border-color: #5e1b5e,
$ui-body-border-color: #5e1b5e
);
/* 应用于 ui: 'featuredpanel' 及 frame: true 的 panel */
@include extjs-panel-ui(
$ui:'featuredpanel-framed',
$ui-header-background-color: #5e1b5e,
$ui-border-color: #5e1b5e,
$ui-header-border-color: #5e1b5e,
$ui-body-border-color: #5e1b5e,
$ui-border-width: 5px,
$ui-border-radius: 4px
);
重新构建主题后,可看到由于例子中的 Panel 设置了 ui: 'featuredpanel', frame: true,
,应用了 ‘featuredpanel-framed’ 中的风格。
参考链接:https://www.atjiang.com/learningExtJs-look-and-feel/