ExtJS 6 自定义 UI

Question

我正在尝试自定义按钮的样式。当我将创建的 UI 之一添加到我的按钮时，它消失了。

@include extjs-button-small-ui(
        $ui: 'test-ui',
        $font-weight: bold,
        $padding: 5px,
        $background-color: #fff
);



Ext.define('MyHeader', {
    extend: 'Ext.panel.Header',
    xtype: 'my-header',

    items: [
        {
            xtype: 'button',
            ui: 'test-ui',
            text: 'Foo Bar'
        }
    ]
});

知道我做错了什么吗？

提前致谢。

Answer 1

您需要创建 Button.scss 文件路径：customTheme\sass\src\button\Button.scss

包含代码：

@include extjs-button-small-ui(
        $ui: 'test-ui',
        $font-weight: bold,
        $padding: 5px,
        $background-color: #fff
);

在文件中。

另请在下方找到正确的代码片段：

Ext.define('MyHeader', {
    extend: 'Ext.panel.Header',
    xtype: 'my-header',

    items: [
        {
            xtype: 'button',
            ui: 'test-ui',
            text: 'Foo Bar'
        }
    ]
});

ExtJS 6 自定义 UI

ExtJS 6 custom UI

javascript

extjs

theming