Как изменить свойства предопределенных элементов пользовательского интерфейса Sencha Ext JS

Question

Существует класс пользовательского интерфейса, предопределенный Сенчей, который называется ui: 'navigation', который устанавливает мое Ext.tab.Panel в качестве меню навигации в черном цвете.

Как я могу переопределить этот интерфейс, чтобы установить разные цвета и другие свойства? Я не могу найти, где определен этот файл 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, а затем передайте свое имя пользовательского интерфейса в свойство tabpanel ui.Например:

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

Все эти переменные sass описаны в этой ссылке

Подробнее о Theme Mixins