Question

I’m using extjs and just trying to solve a simple problem:
I have a form with a fixed width. I want to Center this form within a normal Ext.Panel.
I’m trying to achieve this the ‘css-way’ – setting the left and right margin to ‘auto’.

But this doesn’ work, it seems the margins are just ignored.

The Code:

var curStateForm = new Ext.FormPanel({
    title:'test',
    width:300,
    bodyStyle:'margin:5px auto 0 auto',
    items: [edIst, edAdjust, edSumme]
});   


var testPanel = new Ext.Panel({
    width: '100%',
    frame:true,
    items: [curStateForm]
});  

Answer 1

Have you seen this sample? Look at the example under “custom layouts / center”.

EDIT: In Ext 3, that sample was the way to go. Now in Ext 4, it would be best to use a vbox layout on the outer container with center alignment as shown in A1rPun’s answer.