PDA

View Full Version : Adding item inside an item inside a tabpanel question.



george.antoniadis
26 Nov 2007, 3:05 AM
What the hell am I doing wrong with this one? :/

This one works fine...

Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: Ext.getBody(),
items: [{ xtype: 'button', text: 'test'}]
});
});

But this one... doesn't ... :P

Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Item 1',
items: [
{
xtype: 'button',
text: 'test'
},{
xtype: 'button',
text: 'test'
}
]
},{
title: 'Item 2',
html: 'Another one'
},{
title: 'Item 4',
html: 'Another one'
}]
});
});
The buttons don't appear.

george.antoniadis
26 Nov 2007, 3:37 AM
ps. I know that it doesn't render the panel, but I don't get why...
It seems pointless to have to add a div for each panel and have to add renderTo on each item.

efege
26 Nov 2007, 3:45 AM
I found that the buttons are rendered after doing a resize of the viewport. So, the solution is:

* Add the line tabs.doLayout(); at the end of you code.

Also,

* Add autoHeight: true to the config of the panel that contains the buttons.

There are some threads discussing this topic, search using the keywords add tabpanel dolayout.

george.antoniadis
26 Nov 2007, 3:49 AM
Right on the spot! :)
Worked perfectly, thanks a million efege :)