如何在ExtJS表布局中顶部对齐两个区域?

The ExtJS code below creates two regions to the left and right of each other, like this:

下面的ExtJS代码创建了左右两个区域，如下所示:

What do I have to change to this code so that the two areas are top aligned?

我需要对这段代码做些什么修改才能使两个区域对齐?

<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>

5 个解决方案

#1

In ExtJS 4, you can use the tdAttrs config option:

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

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

#2

For reuse, I would add a class style to your CSS file that will always top-align table layout cells.

为了重用，我将向您的CSS文件添加一个类样式，该样式始终是*对齐的表布局单元格。

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

This is preferred over a previous answer that used .table-layout td as the CSS selector, because if you have a table within this table layout, that selector would top-align ALL cells, not just those associated with the table layout.

与之前使用.table-layout td作为CSS选择器的答案相比，这是更可取的，因为如果在这个表布局中有一个表，那么该选择器将对所有单元格进行顶部对齐，而不仅仅是那些与表布局相关的单元格。

You would add this class to your Ext.Panel like so:

您可以将这个类添加到您的Ext.Panel中，如下所示:

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

If your panel already has a cls attribute, you can add additional classes with spaces:

如果您的面板已经有cls属性，您可以添加带有空格的类:

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

#3

Both suggested answers may do it. But the best answer (at least with Ext-JS 4), is to use an HBox layout and use the align: top, layout config.

两个建议的答案都可以。但是最好的答案(至少对于Ext-JS 4)是使用HBox布局并使用align: top、layout config。

Go to http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html and click on the button that says: 'Align: top', or 'Align: stretch'

访问http://docs.sencha.com/ext-js/4-0/#!/示例/布局/hbox.html，点击按钮，上面写着“Align: top”或“Align: stretch”

#4

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

#5

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