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

在ExtJS 4中,您可以使用tdAttrs配置选项:

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

Answer 2

为了重用,我会在CSS文件中添加一个类样式,它总是顶部对齐表格布局单元格.

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

这比用作.table-layout tdCSS选择器的先前答案更受欢迎,因为如果在此表布局中有一个表,那么该选择器将对齐所有单元格,而不仅仅是与表格布局关联的单元格.

您可以将此类添加到您的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

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