Add logo in extjs tab panel - css

Question

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?

Answer 1

Don't know if this is the right way, or if this is the result you are expecting, but my solution is to use tabBar config in the tabpanel to add the logo, and after the component is created I add the other tabs that I want.
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'
}])
}
}
I had to add the other panels after the component is created because, by default, the tabbar items are added after the tabpanel items, adding them after the component is created, the logo will be on the left of the other panels
Checkout the fiddle