javascript - 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;
}