PDA

View Full Version : What's the best way to center control vertically and horizontally



bseddon
2 Feb 2012, 6:17 AM
Setting styles to change margins to 'auto' doesn't work because the layout logic overrides any explicit styles which affect layout. ux.center is not an option either as it can center only one control. Here's the effect I'm looking for:

31281

If the window were fixed size this would not be difficult. Also I want the the option to have the progress bar to expand horizontally as the window is resized while the button width remains fixed and the window size changes.

To arrange this image, the window is set to a 'vbox' layout with stretch alignment. There are two 'invisible' panels as the first and last items with flex set to 1. This takes care of centering vertically.

Controls within vbox rows can be centered using a similar trick but with an hbox layout. That is, the button is one of three controls on that row (the other two are invisible panels with flex set to 1).

Obviously this approach works but it seems convoluted which probably means I've missed something hiding in plain sight. Do you know what it is?

Here's the ExtJS code for the window:


Ext.application({
name: 'My App',
launch: function()
{
var pb = Ext.create('Ext.ProgressBar',
{
ui:'default',
row: 1
});


// Wait for 5 seconds, then update the status el (progress bar will auto-reset)
pb.wait(
{
interval: 500, //bar will move fast!
duration: 50000,
increment: 15,
text: "Hi, I've got a custom UI...",
scope: this,
fn: function(){
pb.updateText('Done!');
}
});


Ext.create('Ext.window.Window',
{
title: 'Custom Window',
width : 200,
height : 150,
modal: true,
bodyStyle: 'background-color:#fff; padding: 0 4;',
layout: { type: 'vbox', align: 'stretch', shrinkToFit: false },
items:
[
{
border:0, flex: 1
},
pb,
{
border:0, height: 10
},
{
xtype: 'panel',
layout: { type: 'hbox' },
border:0,
items:
[
{
border:0, flex: 1
},
{
xtype: 'button',
width: 60,
border:1,
text: 'XX'
},
{
border:0, flex: 1
}
]
},
{
border:0, flex: 1
}
],
bbar:
[
'->',
{
text: 'close'
}
]
}).show();
}
});

mitchellsimoens
2 Feb 2012, 9:25 AM
I usually use hbox layout:


layout : {
type : 'hbox',
pack : 'center',
align : 'middle'
}

If you look at the HBox layout example and press the button with text : 'Pack: center / Align: middle' you will see this behavior

bseddon
2 Feb 2012, 10:06 AM
Pack! Perfect. Works on vbox as well. Would never have got there.