1

这是一个屏幕截图，用于可视化我想要做什么。在此处输入图像描述

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

我的目标是将标签栏而不是标签面板中的标签宽度设置为 5px。所以它会在标签的图标之间有一个间隔。

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

.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 类根本没有改变......

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

有人可以帮我吗？

4

2 回答 2

1

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

尝试这个：

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

});

见小提琴。

于 2013-08-16T02:38:16.757 回答
0

添加 this.callParent(arguments);

答案 1中初始化函数中的代码

于 2015-01-03T03:46:58.100 回答