PDA

View Full Version : Centering a table layout



alphadogg
25 Nov 2010, 9:18 AM
How do you center the content in a panel that is set to layout: 'table'?



var tableLayout = new Ext.Panel({
layout: 'table',
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
layoutConfig: {
columns: 2,
align: 'center',
extraCls: 'cpop-user-login-table'
},
items: [
{ html: 'sitekey' },
formLogin,
forgotBox
]
});
I'm assuming one can access the generated <table> tag, or the containing <div> tag and force a centering of the table somehow?

Condor
25 Nov 2010, 10:13 AM
TableLayout is a bit limited. Maybe a nested hbox/vbox layout would be easier.

alphadogg
25 Nov 2010, 10:25 AM
Actually, found it myself! Here's the updated code. Relies on the trickiness of table centering CSS (http://www.granneman.com/webdev/coding/css/centertables/) and the tableAttrs config option of the TableLayout.



var tableLayout = new Ext.Panel({
layout: 'table',
title: 'Verify Site Key / Enter Password',
headerCfg: {
cls: 'cpop-user-login-headerCenter'
},
border: false,
layoutConfig: {
columns: 2,
tableAttrs: { style: { 'margin-right': 'auto', 'margin-left': 'auto', 'margin-top':'10px' } }
},
items: [
{ html: 'sitekey' },
formLogin,
forgotBox
]
});