패널의 중앙에 구성 요소 정렬 : EXT JS

Question

전 Ext JS에 익숙하지 않습니다. FormPanel에 3 개의 구성 요소를 배치하려고하는데 중심에 정렬하지 않습니다.

여기이이

같은 출력을 보여줍니다하지만 구성 요소 패널의 중앙에 정렬되어야 할 내 코드

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

입니다. 누구든지 어떻게하는지 압니까?

Answer 1

{ 
//... 
    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()] 
    }] 
//... 
} 

누군가가 내가했던 것처럼 대답을 찾고 함께 제공되며, 여기에 사용하기 위해 xtype을 찾을 수없는 이런 경우에 this

Answer 2

참조 : '스플리터'를 각 항목간에과 같이 -

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

Answer 3

내가 '테이블'레이아웃을 사용하여이 문제를 해결 한 :

{ 
    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 
        ] 
       } 
      ] 
     } 
    ] 
}