4

I am new to ext JS and I am tryin gto place 3 components in a FormPanel but I don't know ho wto align 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());

This shows output like this enter image description here

But I want components to be align in the center of the panel. Anyone know how to do it?

Ajan
  • 141
  • 2
  • 4
  • 10

3 Answers3

6

I have solved this problem by using '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
                    ]
                }
            ]
        }
    ]
}
DMS
  • 61
  • 1
  • 2
3

Just in case someone comes along looking for the answer like I did and couldn't find it here, use xtype:'splitter' between each item like so - 

items:[{
         xtype:'something'
       },
       {
         xtype:'splitter'
        },
       {
         xtype:'something-else'
       }
}]
Lynn Crumbling
  • 12,985
  • 8
  • 57
  • 95
Vivek
  • 31
  • 2
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

Amol Katdare
  • 6,740
  • 2
  • 33
  • 36
  • Thanks Amol, It is positioned in the middle now. But now there is no space between 'Duration:' 'From:' and 'To:'. They all three are placed side by side. Do you know how to give little space between them? – Ajan Jul 07 '11 at 08:07
  • Now I get it, Thanks. I didn't see "See this". – Ajan Jul 07 '11 at 08:19
  • No. I am sorry. But that doesn't seem to solve my problem. In fact now when I am changing my browser window size it is not showing up in the middle. It's not self adjusting with this layout. Do you know where problem is? – Ajan Jul 07 '11 at 08:28