如何更改Sencha Ext JS预定义UI元素的属性

Question

Sencha预定义了一个名为ui: 'navigation'的UI类，它将我的Ext.tab.Panel设置为黑色导航菜单。

如何覆盖此UI来设置不同的颜色和其他属性？我无法找到该SASS文件的定义位置。

Answer 1

在classic中，它在Main.scss文件中。
路径：{YouProject}/classic/sass/src/view/main/Main.scss
这是默认设置：

@include extjs-tab-panel-ui(
    $ui: 'navigation',
    $ui-tab-background-color: transparent,
    $ui-tab-background-color-over: #505050,
    ...
);

它是一个theme-mixin，如果使用TabPanel，则为extjs-panel-ui。如果要覆盖它的复制/粘贴，请更改名称（$ui变量）和其他scss属性值，然后将您的ui名称传递给tabpanel ui属性。例如：

@include extjs-tab-panel-ui(
    $ui: 'my-own-ui',
    $ui-tab-background-color: #404040,
    $ui-tab-background-color-over: #303030,
    ...
);

所有这些sass变量均在此link

中进行了描述

有关Theme Mixins

的更多信息