Как мне выровнять две области в макете таблицы 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 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

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

Answer 4

Оба предложенных ответа могут это сделать. Но лучший ответ (по крайней мере, для Ext-JS 4) - использовать макет HBox и использовать align: top, конфигурационный макет.

Перейдите к http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html и нажмите кнопку с надписью: «Выровнять: верх» или «Выровнять: растянуть»

Answer 5

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