ExtJS4 - Change font size of TabPanel title text

Question

I need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.

I tried adding a CSS class by the cls property, by the itemCls property, and by this:

defaults: {
    cls: 'aClass'
}

The CSS:

.aClass {
    font-size: smaller;
}

But they all look the same:

Nothing seemed to work. How am I able to achieve that?

Answer 1

You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:

See here: http://jsfiddle.net/49Dc8/

JS

Ext.require('Ext.tab.*');

Ext.onReady(function(){
    // basic tabs 1, built from existing content
    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tabs1',
        cls: 'mytab',
        width: 450,
        plain: true,
        activeTab: 0,
        defaults :{
            bodyPadding: 10
        },
        items: [{
            contentEl:'script', 
            title: 'Short Text'
        },{
            contentEl:'markup', 
            title: 'Long Text'
        }]
    });

});

CSS

.mytab .x-tab-inner{
    font-size: 13px;
}