css - 在 extjs 选项卡面板中添加 Logo

Question

我已经使用 Extjs 创建了一个选项卡面板

Ext.define('tabPanel.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',

    requires: [
        'tabPanel.view.MyTabPanelViewModel',
        'Ext.Toolbar',
        'Ext.Img'
    ],

    viewModel: {
        type: 'mytabpanel'
    },
    activeItem: 1,

    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            title: '',
            layout: {
                type: 'hbox',
                align: 'start',
                pack: 'center'
            },
            items: [
                {
                    xtype: 'image',
                    height: 78,
                    width: 101,
                    src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
                }
            ]
        },
        {
            xtype: 'container',
            title: 'Tab 1'
        },
        {
            xtype: 'container',
            title: 'Tab 2'
        },
        {
            xtype: 'container',
            title: 'Tab 3'
        }
    ]

});

我试图将面板标题作为我的站点标题。我试图在选项卡按钮之前添加 Logo 。但是对齐没有按预期工作。是否可以在左侧设置 Logo 并在 Logo 后设置选项卡按钮。可能吗？

Answer 1

不知道这是不是正确的方式，或者这是不是你期待的结果，但我的解决方案是在tabpanel中使用tabBar配置来添加logo，然后在组件已创建我添加我想要的其他选项卡。

tabBar: {
    items: [{
        xtype: 'image',
        height: 78,
        width: 101,
        src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
    }]
},
listeners: {
    beforerender: function (cmp) {
        cmp.insert(1, [{
            xtype: 'container',
            title: 'Tab 1',
        }, {
            xtype: 'container',
            title: 'Tab 2'
        }, {
            xtype: 'container',
            title: 'Tab 3'
        }])
    }
}

我不得不在创建组件后添加其他面板，因为默认情况下，tabbar 项添加在 tabpanel 项之后，在创建组件后添加它们， Logo 将在其他面板的左侧

检查 fiddle