PDA

View Full Version : Centered AbsoluteLayout ?



drunkmoose
13 Oct 2010, 12:42 PM
Hi there,

I've got an absolute layout:



var absoluteLayout = new Ext.Viewport({
layout:"absolute",
title:"AbsoluteLayout Container",
height:760,
width:700,
contentEl: 'mainWindowDiv',
x: 0,
items:[
{
xtype:"panel",
title:"Panel1",
width:255,
height:190
},{
xtype:"panel",
title:"Panel2",
x:"0",
y:190,
width:255,
height:190
},{
xtype:"panel",
title:"Panel3",
x:255,
y:0,
width:445,
height:380
},{
xtype:"panel",
title:"Panel4",
x:"0",
y:"380",
width:700,
height:380
}
]
});


As you see, I'm trying to render it to mainWindowDiv, an HTML element, a DIV that is horizontally centered.

Problem is that layout does not obey the CSS I defined for the body and mainWindowDiv:

This is the HTML:



<body style="text-align: center">
<div id="mainWindowDiv">
</div>

</body>


And the CSS for mainWindowDiv (the DIV really IS centered)



#mainWindowDiv {
width: 800px;
margin: auto;
border: 1px solid;
height: 760px;

}


I am using the right layout style for want I'm trying to do ?

Thanks!

Animal
13 Oct 2010, 12:59 PM
Use the box layouts to do centering.

drunkmoose
13 Oct 2010, 1:12 PM
This is the layout I'm trying to center:

22818

Animal
13 Oct 2010, 9:13 PM
In what way?

Display that, as a Container, centred both horizontally and vertically in another Container?

drunkmoose
14 Oct 2010, 7:00 AM
What's the best practice ? Using the right ExtJS layout or ignoring ExtJS's layouts and doing it purely in HTML/CSS and applying single ExtJS panels to HTML elements ?

Animal
14 Oct 2010, 7:02 AM
Use layouts all the way down from the <body> (Viewport)

drunkmoose
14 Oct 2010, 8:01 AM
I've come to use a 3 columns ColumnLayout, and designed the attached layout above in the center column.

The only thing I'd need is hide the left and right column, so only the center one appears.