I am trying to create a layout that has a title bar and a tab bar just right below it.
I know how to assign a simple html text in each tab and I made it work when I just use tab bar without the title bar. It's as follows:
Ext.define('MyThirdApp.view.Feed', {
extend: 'Ext.TabPanel',
xtype: 'feedcard',
config:{
tabBar: {
layout: {
pack: 'center'
}
},
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'tab1',
html: 'this is tab 1'
},
{
title: 'tab2',
html: 'here is tab2!'
},
{
title: 'tab3',
html: 'here is tab3!'
}
]
}
});
It works fine. Then I tried to add a title bar on top of it by defining another view and adding this tab bar in it
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
and it shows the title bar with just the tab bar below it. It doesn't show any html even when I click on all the different tabs. I have no idea why this happens or what I did wrong, and I tried playing with the layout and the extend: property of MyThirdApp.view.Main, changing it to Container or Panel, none works. I tried looking around at the Kitchensink example from Sencha but I found no part of the code that defines the title bar in their Tab bar UI source. Any help would be appreciated, thank you.
Try adding layout: 'fit' in your main view:-
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
layout: 'fit',
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments