Add custom css class to ExtJS 4.0.7 Panel header

Question

I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a title.

Using a basic Ext panel:

new Ext.panel.Panel({
    title: 'Test',
    items: []
});

The title property triggers a header with a series of classes based off of x-panel-header. In older versions of Ext, I've read about using both a header and headerCfg property to customize the panel header properties but they both seem absent from 4.0.7

I also tried building a custom Ext.panel.Header, and added it as a dockedItem, but it renders with an entirely different set of classes and doesn't behave like the "default" header.

dockedItems: [
    new Ext.panel.Header({
        title: 'Test',
        cls: 'emp-panel-header-alt'
        })
    ]

It renders with the following classes:

x-container emp-panel-header-alt x-container-default x-horizontal x-container-horizontal x-container-default-horizontal x-top x-container-top x-container-default-top x-unselectable x-docked x-docked-top x-container-docked-top x-container-default-docked-top

However, the auto-generated header has the panel header classes:

x-panel-header x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-unselectable x-docked x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top

Also tried adding a class post-instantiation:

myPanel.header.addClass("some-custom-class") // Doesn't work, .header not valid

myPanel.getHeader().addClass("some-custom-class") // getHeader() valid, but returns undefined

So with 4.0+ I suppose you mean 4.0.x ? With 4.1.x and 4.2.x you can use the header config. — matt

matt matt · Accepted Answer · 2013-11-05T19:43:30

Can't think of any easy way to add a class to the header with 4.0.7. You could define your own class which extends from Ext.panel.Panel and has a headerCls config:

Ext.define('My.Panel', {
    extend: 'Ext.panel.Panel',

    headerCls: '',

    onRender: function() {
        this.callParent(arguments);

        if (this.headerCls) {
            this.header.addClass(this.headerCls);
        }
    }
});

...but that might be a little too much effort for just adding a simple class.

However, couldn't you just add a cls config on the panel itself and address the header with a corresponding CSS selector:

.my-class .x-panel-header {}

Add custom css class to ExtJS 4.0.7 Panel header

1 Answers