PDA

View Full Version : How to build a TabPanel with 'fullscreen: false'?



konki_vienna
6 Dec 2010, 4:37 AM
Can anyone paste me the code for a tabPanel with specific width/height and 'fullscreen: false' - I cannot manage to code it correctly :(

(I want to put a TabPanel with let's say two or three tab-buttons in the upper tabBar of a container-component, which fills only part of the screen...)

Whenever I remove 'fullscreen: true' from the tabPanel-example, it does not show the content of the tabs anymore...

Thank you so much!

konki_vienna
6 Dec 2010, 4:48 AM
Not the first time that I post a question and find the answer by myself! :)



{
xtype: 'container',
cls: 'borderGreen',
height: '100%',
items: [new Ext.TabPanel({
//fullscreen: true,
width: '100%',
height: '100%',
ui : 'dark',
sortable : true,
defaults: {
},
items: [
{
title: 'Tab 1',
html : '1',
cls: 'borderRed',
items: [{
xtype: 'container',
html: 'testing the width of my new tab component is not that easy as you might have thought',
cls: 'borderBlue'
}]
},
{
title: 'Tab 2',
html : '2',
cls: 'borderRed'
},
{
title: 'Tab 3',
html : '3',
cls: 'borderRed'
}
]
})]
}

mitchellsimoens
6 Dec 2010, 6:10 AM
Don't overnest

konki_vienna
6 Dec 2010, 6:17 AM
what do you mean? how would you do it?
Thanx for a reply!

mitchellsimoens
6 Dec 2010, 6:20 AM
width and height cannot accept strings, only numbers so " width: '100%' " won't do anything. Also, if you don't specify fullscreen config and it is not a child of another component, you will need to set the renderTo config to wherever you want it to render to.

For overnesting explanation... see this: http://www.sencha.com/forum/showthread.php?117627-Overnesting-Explained.....