Sencha ExtJs 7.1定制单个组件

Question

我正在尝试自定义单个组件CSS，避免自定义所有组件。

Ext.define('MyApp.tab.Panel', {
    extend: 'Ext.tab.Panel',


    header:{
        xtype: 'myWorkspacesToolbar',
        items:[
             ....
        ]       


    },
    items:[
        ....
    ]

我只想自定义HEADER样式及其子项（动态添加），而不自定义面板项。例如，使用scss文件myWorkspacesToolbar.scss：

$button-toolbar-color: #F00;

我更改所有按钮的颜色（标题和面板项以及子项）。

使用主题混合变量，我必须为页眉中的单个字段设置UI以获得CSS更改。

最佳方法是什么？

Answer 1

使用extjs-button-ui mixin创建所需的按钮，并将ui属性设置为标题中的按钮