title: Align components in the center in a Panel: EXT JS
body: <p>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.  </p>
  
  <p>Here is my code</p>
  
  <pre><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('&lt;br/&gt;&lt;font size="3"&gt;Duration: &lt;/font&gt;')]
                  },{
                      columnWidth     : .20,
                      layout          : 'form',
                      items           : [fromDate()]
                  },{
                      columnWidth     : .17,
                      layout          : 'form',
                      items           : [toDate()]
                  }]
            }]
          }]
      });
  
      durationForm.render(Ext.getBody());
  </code></pre>
  
  <p>This shows output like this
  <img src="https://i.stack.imgur.com/EukLa.png" alt="enter image description here"></p>
  
  <p>But I want components to be align in the center of the panel. Anyone know how to do it?</p>