PDA

View Full Version : Panels in container: how to set marginTop?



glasnhost
20 Jul 2010, 2:40 AM
I have 3 panels in a TabPanel container.
One Panel is created with xtype, the others 2 are objects (see code attached):
panel1=new Ext.Panel(..);
panel2=new Ext.Panel(..);
tabs = new Ext.TabPanel({...items:[{items: [panel1,panel2,{xtype:"panel"...

I'm able to give a top margin to the xtype-created panel, using: style:{marginTop:'10px'} in the definition.

However I didn't find a way to give borders to the other two panels...any margin property in panel1-2 doesn't have any effect.
Any idea?

PS. to try attached code, just put it in ext-3.2.1/examples/tabs/

Animal
20 Jul 2010, 2:44 AM
Use layout: 'vbox'

The API docs and examples tell you all you need to know.

Animal
20 Jul 2010, 2:46 AM
That's if you are sizing the TabPanel, and want them all fitted in.

Otherwise use layout: 'anchor' and the style config

glasnhost
20 Jul 2010, 12:00 PM
Thanks for the hint about vbox layout...(the doc is VERY good indeed, but sometimes is hard to

Now I managed to have two panels inside a Panel with a margin between them, using layout:{type:"vbox", defaultMargins: '10 0 0 0'}

However, if I put the panels inside a TabPanel, for some reason the height is not calculated right, and the panels go out of the TabPanel...


tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:'200',
autoHeight: true,
activeTab: 0,
items:[{
xtype: 'panel',
title: 'Tab 1',
autoHeight: true,
items:[
{xtype: 'panel', title: 'panel1', html: 'panel1'},
{xtype: 'panel', title: 'panel2', html: 'panel2'}
]
,layout:{type:"vbox", defaultMargins: '0 0 10 0'} //Panels disappear??
}]
});


I tried to play around with heights but with no success...any help?

Animal
20 Jul 2010, 12:13 PM
If you are not giving the TabPane height ,then use layout: 'anchor' to make the 3 panels 100% width, and just use style to separate them,

glasnhost
21 Jul 2010, 7:31 AM
thank you again, I managed to make it works with 'anchor' (or 'fit') and autoHeight: true...so I should say it's solved...
However I don't quite understand why I have to put autoHeight: true in all the panels (which according to panel's API doc should not be used if 'If the panel is within a layout that manages dimensions' since it 'will not generally work as expected'). Otherwise, TabPanel is not expanded enough.

Also I'm not able to give a fixed height to the TabPanel: height preoperty seems ignored.
Am I doing something wrong?



new Ext.TabPanel({
renderTo: 'tabs',
width:'200',
autoHeight: true,
activeTab: 0,
items:[{
xtype: 'panel',
title: 'Tab 1',
border: true,
autoHeight: true,
items:[
{xtype: 'panel', title: 'panel1header', html: 'panel1text',anchor:'100% 40%', autoHeight: true},
{xtype: 'panel', title: 'panel2header', html: 'panel2text',anchor:'100% 40%', style:{marginTop:'15px'}, autoHeight: true}
],
layout:{type:"anchor"}
}]
});

Animal
21 Jul 2010, 7:35 AM
TabPanel will attempt to size its children to fit into itself.

autoHeight defeats any attempt to set the height.