How do I top align two areas in an ExtJS table layout?

Question

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

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>

Answer 1

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

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