PDA

View Full Version : center a panel within a panel



wakatanka
2 Dec 2011, 11:07 PM
Hi all, probably is an easy thing but i can't get it.

I want center a panel(login panel) of 300x300 px in my window ( a main panel) for a login page,
but my login panel is always placed at the left top.
here a screenshot of the result desidered.

thanks to all.

mitchellsimoens
5 Dec 2011, 1:57 PM
Using hbox (or vbox)... have 3 items within the panel... first and third are just spacers that have flex : 1. The second item is you actual panel with a predefined height or some flex value. Then in your layout Object set pack : 'center'


var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'hbox',
pack : 'center'
},
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
title : 'Hello'
}
],
items : [
{
xtype : 'spacer'
},
{
xtype : 'container',
cls : 'border-me',
html : 'hello',
height : 300,
width : 300
},
{
xtype : 'spacer'
}
]
});

Here is the css to see the 2nd item easier:


<style>
.border-me {
border: 1px solid #000;
}
</style>