Ext.NET主题修改/外观自定义

界面排版花了很长时间才知道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 等效果。

添加新的渐变：

1. 在文件 ext/packages/my-custom-theme/sass/etc/all.scss 中加入：

@import 'mixins'; /* 导入 mixins.scss 文件 */

1. 创建文件 ext/packages/my-custom-theme/sass/etc/mixins.scss 文件，内容为：

/* 导入 mixins/background-gradient.scss 文件 */
@import 'mixins/background-gradient'; 

1. 创建文件 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/