ExtJS4 - 更改 TabPanel 标题文本的字体大小

Question

我需要更改TabPanel 中选项卡标题的文本，但我不希望这会影响应用程序中的所有其他TabPanel，仅此TabPanel。

我尝试通过 cls 属性、itemCls 属性和以下方式添加 CSS 类：

defaults: {
    cls: 'aClass'
}

CSS：

.aClass {
    font-size: smaller;
}

但它们看起来都一样：

似乎没有任何效果。我怎样才能做到这一点？

Answer 1

您确实应该在您的标签面板上使用cls 属性，然后拥有一个仅指向该标签面板的自定义 CSS 选择器：

请看这里：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;
}