Adding a image in ext tab panel - extjs

Question

I am new to ext js.How do i add an image as a logo of my application in the header of ext tab panel?
Following is my code:-
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
defaults: {
styleHtmlContent: true
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'fa-home',
layout: 'fit',
items: [{
xtype: 'mainlist'
}]
}
]
});
I need to add a logo in place of 'myapp' which is appearing as title. I want it something like the below image:-

Answer 1

To Answer this I created a new app in Extjs6 and did some modification which is below to get the logo.
Place the image and css in your resource folder then add below css in your css file.
.my-logo-icon {
background-image: url(../images/newpowered.gif) !important;
}
then place css path in app.json to get the css.
{
"path": "resources/css/styles.css"
}
Now in your code call this css at iconCls
iconCls: 'my-logo-icon'
complete code is
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,
header: {
layout: {
align: 'stretchmax'
},
title: {
flex: 0
},
iconCls: 'my-logo-icon'
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},
defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},
items: [{
title: 'Home',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Users',
iconCls: 'fa-user',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Groups',
iconCls: 'fa-users',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]});
And out put image is

Answer 2

You can also do it like this:
items : [{
title : "<img src='../resources/images/whatever.png'>",
xtype : 'home-page',
bodyCls : 'menu-tabs' // optional
}, {
}]
and if you want the tab to be a little taller just use this as css
div[class~="menu-tabs"] div[class~="x-box-scroller-body-vertical"] div[class~="x-box-target"] a[class~="x-tab-default"] span[class~="x-tab-wrap-default"] span[class~="x-tab-button-default"]{
height: 50px;
}