Search code examples
extjscomponentsthemescustomizationextjs7

Sencha ExtJs 7.1 customize single component

I'm trying to customize a single component CSS, avoid to customize all component. 

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


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


    },
    items:[
        ....
    ]

I want to customize only HEADER style and his sub items (added dynamically) and not Panel items. Using scss file myWorkspacesToolbar.scss for example:

$button-toolbar-color: #F00;

I change all button color (header and panel items and sub items).

Using theme mixing variable I have to set UI for single field in header to obtain CSS changes.

What is the best way to do that?

Solution

  • Use extjs-button-ui mixin for create needed button and set ui property to your button in header