在 ExtJS 面板中更改标题背景颜色

Question

I have a two panels whose header I want to be in a different color than the default one provided by Ext JS Theme...

items: [{
        title: 'Blacklist',
        style: {
            backgroundColor: 'red',
            backgroundImage: 'none'
        },
        padding: '5 5 5 5',
        cls: 'blackList',
        items: [
            grid
        ]
    }
]

But it doesn't work. Also I tried to set CSS property in my styles.css but it changes only the part of the title.

#panel-1091_header-title-textEl{
    background-color: black !important;
}

Answer 1

FIDDLE

Here's the style:

.myCls .x-panel-header-default {
    background-color: green;
}

And you define the cls in panel properties:

cls: 'myCls'

Answer 2

Fiddle

Please use header and apply style to it:

title: 'Blacklist',
header: {
    style: {
        backgroundColor: 'red'
    }
},

Do not need to use cls