CODEWITHSUNDEEP
javascriptextjstheming
xhadon
xhadon

Reputation: 876

ExtJS 6 custom UI

I'm trying to customize the styling of my buttons. When I add one of the created UIs to my button, it disappears. 

@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'
        }
    ]
});

Any ideas what I'm doing wrong here?

Thanks in advance.

Upvotes: 0

Views: 2521

Answers (1)

Neha
Neha

Reputation: 46

You need to create the Button.scss file path: customTheme\sass\src\button\Button.scss

Include the code:

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

in the file.

Also please find the correct code snippet below:

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

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

Upvotes: 3

Related Questions