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;

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

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

最好的方法是什么？

Answer 1

将 extjs-button-ui mixin for create needed button and set ui 属性用于 header

中的按钮

Sencha ExtJs 7.1 自定义单组件

Sencha ExtJs 7.1 customize single component

customization

components

themes

extjs

extjs7