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

时间:2014-07-15 16:33:44

标签: javascript html5 css3 extjs4 tabpanel

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

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

defaults: {
    cls: 'aClass'
}

CSS:

.aClass {
    font-size: smaller;
}

但他们看起来都一样:

enter image description here

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

1 个答案:

答案 0 :(得分: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;
}