javascript - 如何在ExtJS表格布局中顶部对齐两个区域？

下面的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>

最佳答案

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

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

关于javascript - 如何在ExtJS表格布局中顶部对齐两个区域？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5220253/