對齊面板中心的組件：EXT JS

我是新來的分機JS，我嘗試將3個組件放在FormPanel中，但我不知道要在中心對齊它們。對齊面板中心的組件：EXT JS

這裏是我的代碼

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

這說明這樣的 enter image description here

輸出，但我想組件在面板的中心對齊。任何人都知道如何做到這一點？

來源

2011-07-06 Ajan


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

見this

來源

2011-07-06 21:58:11

感謝阿莫爾，它現在定位在中間。但是現在，「持續時間」，「發件人」和「收件人：」之間沒有空格。他們三個並排放置。你知道如何在它們之間留出一點空間嗎？ – Ajan

現在我明白了，謝謝。我沒有看到「看到這個」。 – Ajan

不，我很抱歉。但是這似乎並沒有解決我的問題。實際上，現在當我改變我的瀏覽器窗口大小時，它並沒有出現在中間。這種佈局不是自我調整的。你知道問題在哪裏嗎？ – Ajan

萬一有人來一起尋找答案，像我一樣，無法在這裏找到它，使用的xtype：「分流」各項目之間像這樣 -

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

來源

2012-10-19 14:53:37 Vivek

我以「表」佈局解決了這個問題：

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

來源

2013-06-10 21:21:39 DMS

對齊面板中心的組件：EXT JS

回答

相關問題