How to properly specify theme variables in extjs?

user_12657624 0
Viewed 715

I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:

app.js

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'MyPanel',
            cls: 'title',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'button',
                text: 'myButton'
            }, {
                html: 'Hello World!!!',
            }]

        })
    }
});

So, according to documentation I managed to change header background-color with the following css file:

app.css

.title .x-panel-header {
    background-color: pink;
    color: red;      /* this doesn't work */
    font-size: 22px; /* this doesn't work */  
}

The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?

enter image description here

sass extjs css styles
1 Answers

Almost all ExtJS components have a style or cls property. Manually overriding the extjs css classes should be the last resort.

In your case you should be looking at these components:

Ext.panel.Header

Ext.panel.Title

The panel component should have a header config and the header component should have a title config to customize each part.

Here is working example: Sencha fiddle example

For the sass variables you mentioned

They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)

I'd recommend you to read this guide for more information on this subject: Theming guide

user_123970270
Related