Center alignment of components in a panel: EXT JS

Question

I am new to ext JS and I am trying to place 3 components in FormPanel, but I do not know to install them in the center.

Here is my code

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()); 

An output similar to this is displayed here.

But I want the components to be centered in the panel. Does anyone know how to do this?

Answer 1

I solved this problem using a table layout:

 { layout : 'fit', // parent panel should have 'fit' layout items : [ // and only one item { xtype : 'panel', border : false, // optional layout : { type : 'table', columns : 1, tableAttrs : { style : { width : '100%', height : '100%' } }, tdAttrs : { align : 'center', valign : 'middle', }, }, items : [ // a single container for nested components { xtype : 'panel', layout : 'fit', cellId : 'cell_id', // this one will be placed as id for TD items : [ {}, {}, {} // nested components ] } ] } ] } 

Answer 2

Just in case, someone comes looking for an answer like I couldn’t find it here, use xtype: "splitter" between each element, for example:

 items:[{ xtype:'something' }, { xtype:'splitter' }, { xtype:'something-else' } }] 

Answer 3

 { //... layout:'hbox', layoutConfig: { padding:'5', pack:'center', align:'middle' }, items:[{ columnWidth : .13, layout : 'form', items : [getNewLabel(...)] },{ columnWidth : .20, layout : 'form', items : [fromDate()] },{ columnWidth : .17, layout : 'form', items : [toDate()] }] //... } 

See this