How to change the font size of a grid title - ExtJS?

Question

I'm new to Ext but after several researches and questions on Stack Overflow, I succeeded to add pictures in grid rows, headers rows, to change font-size, font-color of header titles, etc. But I still don't know how to change the font-size and so of the main title of the panel. I succeeded to put a picture into the title panel by adding direct CSS, but not much.

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.GridPanel',


alias: 'widget.userlist',


cls: 'overall', 


title: 'XXX // DEMO <img class="title-icon" style="vertical-align:middle; margin-bottom:10px; " src="xxx/xxx/xxx.png"/> '

It might be a simple question to answer ! Thanks a lot :-) Best Regards.

Solution

It's normally .x-panel-header-text-default CSS class that controls panel header font styles. If you navigate to a panel header in Firebug inspector you may see:

.x-panel-header-text-default {
    color: #333333;
    font-family: tahoma,arial,verdana,sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
}

So you can override that rule in your CSS, or you can say take advantage of headerCls config option to specify your CSS class.

Comments

[Admin]

But I don't get how to use the headerCls. I wrote headerCls: 'texttitle'in my View file and .texttitle .x-panel-header-text { in my CSS file, but it does not work :(

[Greendrake]

Inspect your CSS styles on the header's span element in Firebug. You will see why your styles do not apply. For example, they may have lesser priority than the original styles, in that case you'll need to set !important suffix on your styles.