时间戳

首页 > 解决方案 > Add logo in extjs tab panel

css - Add logo in extjs tab panel

问题描述

I have created a tab panel using 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'
        }
    ]

});

I was trying to make the panel header as my site header. I was tried to add a logo before the tab buttons. But the alignment was not working as expected. Is it possible to set the logo in the left and the tab buttons after the logo. Is it possible?

标签： cssextjssencha-architect

解决方案

不知道这是否正确，或者这是否是您期望的结果，但我的解决方案是使用tabBar选项卡面板中的配置来添加徽标，并在创建组件后添加我想要的其他选项卡.

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

检查小提琴

推荐阅读