Alinear componentes en el centro en un Panel: EXT JS

Soy nuevo en ext JS y estoy tratando de colocar 3 componentes en un FormPanel, pero no sé cómo alinearlos en el centro.

Aquí está mi código

var durationForm = new Ext.FormPanel({
        border      : false,
        labelAlign  : 'top',
        frame       : true,
        bodyStyle   : 'padding-left:475px;',
        items: [{
          items: [{
            rowWidth    : .5,
            layout      :'column',
                items:[{
                    columnWidth     : .13,
                    layout          : 'form',
                    items           : [getNewLabel('<br/><font size="3">Duration: </font>')]
                },{
                    columnWidth     : .20,
                    layout          : 'form',
                    items           : [fromDate()]
                },{
                    columnWidth     : .17,
                    layout          : 'form',
                    items           : [toDate()]
                }]
          }]
        }]
    });

    durationForm.render(Ext.getBody());

Esto muestra resultados como este

Pero quiero que los componentes se alineen en el centro del panel. ¿Alguien sabe cómo hacerlo

Respuestas a la pregunta(3)

Su respuesta a la pregunta