如何在ExtJS表格佈局中對齊兩個區域？

Question

下面的ExtJS的代碼創建兩個區域彼此的左邊和右邊，像這樣：

我有什麼改變這個代碼，以便在兩個區域頂部對齊？

<script type="text/javascript"> 

    var template_topbottom_top = new Ext.Panel({ 
     frame: false, 
     border: false, 
     header: false, 
     items: [] 
    }); 

    var template_topbottom_bottom = new Ext.Panel({ 
     frame: false, 
     border: false, 
     header: false, 
     items: [] 
    });  

    var template_topbottom = new Ext.Panel({ 
     id:'template_topbottom', 
     baseCls:'x-plain', 
     renderTo: Ext.getBody(), 
     layout:'table', 
     layoutConfig: {columns:2}, 
     defaults: { 
      frame:true, 
      style: 'margin: 10px 0 0 10px; vertical-align: top' //doesn't work 
     }, 
     items:[{ 
       width: 210, 
       height: 300, 
       frame: false, 
       border: true, 
       header: false, 
       items: [template_topbottom_top] 
      },{ 
       width: 1210, 
       height: 200, 
       frame: false, 
       border: true, 
       header: false, 
       items: [template_topbottom_bottom] 
      } 
     ] 
    }); 

    replaceComponentContent(targetRegion, template_topbottom, true); 

</script> 

Answer 1

<style> 
    .x-table-layout td { 
      vertical-align:top; 
    } 
</style> 

Answer 2

重用，我想補充一類風格，將永遠頂部對齊表格佈局單元格CSS文件。

<style> 
    .x-table-layout-cell-top-align td.x-table-layout-cell { 
     vertical-align: top; 
    } 
</style> 

這是優於所用.table-layout td作爲CSS選擇一個以前的答案，因爲如果你有此表佈局內的表中，選擇將頂部對齊所有細胞，而不僅僅是那些與表格的佈局相關。

你將這個類添加到您的Ext.Panel像這樣：

new Ext.Panel({ 
    cls: 'x-table-layout-cell-top-align', 
    layout: 'table', 
    items: [ 
     ... 
    ] 
}) 

如果你的面板已經有一個cls屬性，你可以用空格添加額外的類：

cls: 'my-container-cls x-table-layout-cell-top-align', 

Answer 3

兩個參考答案可能做到這一點。但最好的答案（至少在Ext-JS 4中）是使用HBox佈局並使用佈局配置align: top。

轉到http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html並點擊該說的按鈕： '對齊：頂部'，或 '對齊：拉伸'

Answer 4

在ExtJS的4，你可以使用tdAttrs配置選項：

layout: { 
    type: 'table', 
    columns: 2, 
    tdAttrs: { 
     valign: 'top' 
    } 
} 

Answer 5

  tdAttrs : { 
       style : { 
        verticalAlign : 'top' 
       } 
      }