PDA

View Full Version : Border Layout - top margin



denkide
23 Nov 2009, 1:14 PM
i got the complex layout working, but i would like the top margin to begin lower than the top of the page.

where can i set the top margin for the layout?
ideally i would like to put a header at the top and start the layout after the header.

thanks!

abe.elias
24 Nov 2009, 10:31 AM
I assume you are using a border layout on your viewport.

I've included some Designer screenshots, that illustrate having a panel in the north region and then turning off the header.

You can use a container too, hope this helps. I suggest downloading the Designer and playing around with some options.

denkide
24 Nov 2009, 10:37 AM
i had no idea that there was a designer. thanks ... will check that out.

denkide
24 Nov 2009, 12:54 PM
thanks abe, for the lead.

looks like the answer that i was looking for was the "cmargin" property. just for future reference, this is what i came up with ...



new Ext.Viewport(
{
layout : "border",
items : [
{
region : "center",
title : "center"
},
{
region : "north",
title : "north",
split : true,
titleCollapse : true,
margins: { top: 100, right: 0, bottom: 0, left: 0 },
cmargins: { top: 100, right: 0, bottom: 0, left: 0 },
closable : false,
collapsible : true,
height : 75
},
{
region : "south",
title : "south",
height : 100,
split : true,
collapsible : true,
titleCollapse : true
},
{
region : "west",
title : "west",
width : 150,
split : true,
collapsible : true,
items :
[
{
layout : "accordion",
layoutConfig :
{
activeOnTop : false,
animate : true,
autoWidth : true,
collapseFirst : true,
fill : true,
hideCollapseTool : false,
titleCollapse : true
},
items :
[
{
title : "Panel 1",
autoHeight : false,
html : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus."
},
{
title : "Panel 2",
autoHeight : false,
html : "Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
},
{
title : "Panel 3",
autoHeight : false,
html : "Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
},
{
title : "Panel 4",
autoHeight : false,
html : "Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
}
]
}
]
},
{
region : "east",
title : "east",
width : 150,
split : true,
collapsible : true
}
]
});