ExtJS4 - изменить размер шрифта текста заголовка TabPanel

Мне нужно изменить текст заголовка вкладки в TabPanel, но я не хочу, чтобы это повлияло на все остальные TabPanel в приложении, только на этот TabPanel.

Я попытался добавить класс CSS по свойству cls, по свойству itemCls и по этому:

defaults: {
    cls: 'aClass'
}

CSS:

.aClass {
    font-size: smaller;
}

Но все они выглядят одинаково:

введите здесь описание изображения

Казалось, ничего не работает. Как я могу этого добиться?


javascript html css tabpanel extjs4
person Bruno Finger    schedule 15.07.2014    source источник
comment
Введите для него точный размер шрифта. И используйте ‹span class=aClass› ваш текст‹/span›   -  person ofer dofer    schedule 15.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы действительно должны использовать свойство 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;
}
person koni    schedule 15.07.2014
comment
Отличный ответ. Действительно, я не нашел ссылок на селектор .x-tab-inner. Это сработало, спасибо! - person Bruno Finger; 15.07.2014