PDA

View Full Version : Help needed centering a FormPanel in a Viewport



parky128
26 May 2010, 6:45 AM
Hi There,

This is probably a really simple requirement, but here goes...

I am trying to center a FormPanel in a Viewport which only has a center region defined. My code is as follows:



new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
items: [
new Ext.form.FormPanel code here...
]
}]
});
What I end up with is my FormPanel aligned to the top left of the screen. I need to get it centered in the middle of the screen. Is there a config option in the center region which aligns its items to the center, or should I be using a different layout config? I took a look at the other layout types in the API docs but am still unsure.

Thanks in advance to anyone who can assist.

Rob

Condor
26 May 2010, 6:59 AM
Include examples/ux/CenterLayout.js and use layout:'ux.center' on the Ext.Viewport.

parky128
26 May 2010, 7:33 AM
Hi Condor,

Thanks for the suggestion.

I gave that a go but it has made no difference to the position of the form.

My full code is as follows:



Ext.onReady(function() {
Ext.QuickTips.init();


new Ext.Viewport({
layout: 'ux.center',
items: [{
region: 'center',
items: [
new Ext.form.FormPanel({
id: 'form1',
labelAlign: "right",
frame: true,
autoHeight: false,
width: 450,
waitMsgTarget: true,
bodyStyle: "padding:5px 10px 0 10px;",
url: "GenerateVDX.ashx",
standardSubmit: true,
title: "Visio VDX Generator Tool",
items: [{
xtype:'fieldset',
title: 'Choose Data Source',
items: [{
xtype: 'radiogroup',
id: 'radiogroupType',
fieldLabel: 'Select Type',
width: 250,
columns:1,
items: [{
xtype: 'radio',
id: 'radioCircuit',
boxLabel: 'Customer Circuit',
name: 'sourceType',
inputValue: 'circuit',
checked: true
},{
xtype: 'radio',
id: 'radioSpan',
boxLabel: 'Circuit Span',
name: 'sourceType',
inputValue: 'span'
}]

}]

}]

})
]
}]
});

});


I have double checked the path to the CentreLayout.js in my application and it seems fine. I guess it must be finding the 'ux.layout' manager otherwise I would be getting errors.

Any ideas?

Rob

Condor
26 May 2010, 7:39 AM
I forgot: ux.layout doesn't work on the viewport.

Try:

new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'container',
layout: 'ux.center',
items: {
xtype: 'form',
...
}
}
});

parky128
26 May 2010, 7:55 AM
I gave that a go, still the same I'm afraid :(

My revised code...



new Ext.Viewport({
layout: 'fit',
items: [{
layout: 'ux.center',
items: [
new Ext.form.FormPanel({
id: 'form1',
labelAlign: "right",
frame: true,
autoHeight: true,
width: 450,
waitMsgTarget: true,
bodyStyle: "padding:5px 10px 0 10px;",
url: "GenerateVDX.ashx",
standardSubmit: true,
title: "Visio VDX Generator Tool",
items: [{
xtype:'fieldset',
title: 'Choose Data Source',
items: [{
xtype: 'radiogroup',
id: 'radiogroupType',
fieldLabel: 'Select Type',
width: 250,
columns:1,
items: [{
xtype: 'radio',
id: 'radioCircuit',
boxLabel: 'Customer Circuit',
name: 'sourceType',
inputValue: 'circuit',
checked: true
},{
xtype: 'radio',
id: 'radioSpan',
boxLabel: 'Circuit Span',
name: 'sourceType',
inputValue: 'span'
}]

}]

}]

})
]
}]
});

carol.ext
28 May 2010, 10:57 AM
Did you include the style sheet? examples/ux/css/CenterLayout.css

parky128
1 Jun 2010, 12:27 AM
Hi,

I hadn't included the style sheet, but when I do all that happens is the content of the form gets centered and not the actual form itself. Any more ideas?

Thanks,

Rob

Condor
1 Jun 2010, 12:31 AM
If you use my example from above you only need:

.ux-layout-center-item {
margin:0 auto;
text-align:left;
}
.ux-layout-center .x-panel-body {
text-align:center;
}
(the body.ux-layout-center rule breaks text alignment)

parky128
2 Jun 2010, 12:47 AM
Still not working Im afraid Condor. All its doing is centering the text, controls etc that are within the FormPanel which I do not want. I want the whole panel centered in position on the users screen.

parky128
2 Jun 2010, 12:55 AM
I wish to retract my last post!

Sorry, my bad, made a mistake, have got it centering now!

Thanks!