如何在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' 
       } 
      }