How to properly specify theme variables in extjs?

Question

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?

DerKorb · Accepted Answer · 2021-01-15 15:13:06Z

2

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

edited Jan 15, 2021 at 15:13

answered Jan 15, 2021 at 15:07

DerKorb

6774 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jakub Over a year ago

Do you have an idea how to apply the css border rule for the Ext.panel.Panel? I'm trying with bodyStyle: {border: '55x solid red',} but get no positive results.

DerKorb Over a year ago

Do you have something like this in mind? fiddle.sencha.com/#view/editor&fiddle/3k5t

Collectives™ on Stack Overflow

How to properly specify theme variables in extjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related