在 extjs 选项卡面板中添加徽标

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'
        }
    ]

});

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

Answer 1

不知道这个方法对不对，或者是不是你期待的结果，我的解决办法是在tabpanel中使用tabBarconfig来添加logo，在component之后创建后我添加了我想要的其他选项卡。

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 项之后，在创建组件后添加它们，徽标将在另一个的左侧面板

查看 fiddle

在 extjs 选项卡面板中添加徽标

Add logo in extjs tab panel

css

extjs

sencha-architect