将一个CSS类添加到TabBar中的TAB，而不是它自己的选项卡

Question

这是一个截图，可视化我想要做的事情。

有一个额外的标签，它是无图标的（在退出和项目之间）。 突出显示的蓝色线条是检查器中的元素本身。

我的目标是在标签栏中设置标签的宽度，而不是在tabpanel中设置为5px。 因此它会在标签的图标之间有间隔。

我尝试手动添加一个CSS类，以便创建一个指向该元素的非常具体的规则，并在此规则中将宽度设置为5px，并带有！important标记。

.x-tab .x-tab-normal .x-item-disabled .x-iconalign-center .x-tab-icon .x-layout-box-item .x-stretched
{
  width:5px !important;
}

可悲的是，我从未找到过在组件层次结构的特定级别添加类的方法。

所以我尝试替换该组件的现有CSS类（.x-item-disabled）。 我将.x-item-disabled更改为.fake并相应地创建了CSS规则... 它没有用，并且在第一种情况下，检查员中组件的css类没有改变。

我很确定我需要这样做，因为它不是sencha允许我们做的事情。

有人可以帮我解决问题吗？

Answer 1

Ext.tab.Bar和Ext.tab.Tab是私有类，而Ext.tab.Panel似乎没有公开该功能，所以我想目前没有简单的方法来执行您的要求。这些选项卡是基于Panel项配置构建的，但是您传入的数据不会直接映射到它们。实际上，如果您将cls或style属性应用于项目配置，则会转到面板的内容，而不是其关联的选项卡。但是，您可以在初始化面板后修改选项卡：

试试这个：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: '',
            iconCls: 'dummy',
            html: ''
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ],

    initialize: function() {
        // get spacer by position, it's ugly but it works
        // without extending Sencha components
        var spacer = this.getTabBar().getAt(1);
        // of course here you could apply a CSS class
        // if you prefer
        spacer.setStyle('width:5px; min-width:5px;');
        // let's also disable the button
        spacer.setDisabled(true);
        // and remove the icon since it is mandatory in Panel
        // config but we don't really want it
        spacer.setIcon(false);
    }

});

请参阅fiddle。

Answer 2

添加      this.callParent（arguments）;

代码在 初始化 功能中回答1