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

Question

我需要在TabPanel中更改标签标题的文字，但我不希望这会影响应用中的所有其他TabPanel，只需TabPanel 1}}。

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

defaults: {
    cls: 'aClass'
}

CSS：

.aClass {
    font-size: smaller;
}

但他们看起来都一样：

似乎没什么用。我怎么能做到这一点？

Answer 1

您确实应该使用tabpanel上的cls属性，然后拥有一个只指向该tabpanel的自定义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;
}