PDA

View Full Version : Any tutorials on ExtJS layouts for centered panels?



darrenly
13 Aug 2009, 3:24 PM
I am trying to make a centered panel for a login, is there a tutorial pre made for this? The ones here are very vague. I am not asking anyone to write the code for it I just need a very good tutorial so I can make a simple centered login box and a panel above it. Thanks ~o)

elishnevsky
13 Aug 2009, 3:34 PM
Just use Ext.Window.

Animal
13 Aug 2009, 9:39 PM
Or you could add this override:



Ext.override(Ext.Element, {
/**
* Sets this Element to be centered within its parent element either horizontally
* or vertically, regardless of any size changes to the parent element.
* @param {Boolean} horizontal Defaults to true, so may be omitted. Anchor this Element to the horizontal center of its parent element.
* @param {Boolean} vertical Defaults to false. Anchor this Element to the vertical center of its parent element.
*/
setCentered: function(horizontal, vertical) {
var s;
if (horizontal !== false) {
s = this.getWidth();
this.setStyle({
'position': 'relative',
'margin-left': (s / -2) + 'px',
'left': '50%'
});
}
if (vertical) {
s = this.getHeight();
this.setStyle({
'position': 'relative',
'margin-top': (s / -2) + 'px',
'top': '50%'
});
}
}
});


And center the element in either an afterlayout listener (if it's autosizing), or an afterrender listener if you are configuring it with a height and width.