Попытка структуры с BorderContainer (dojo)

Question

Мне нужен BorderContainer, как на картинке, два ContentPane вверху и один внизу, но я не могу сделать это с регионами, поэтому я не знаю, нет ли способа сделать это с регионы.

Спасибо

Answer 1

Это немного зависит от того, как вы хотите масштабировать панели при изменении размера окна. Вы хотите, чтобы нижняя панель заняла всю дополнительную высоту? Вы хотите, чтобы две верхние панели оставались 50/50 в ширину?

Предполагая, что вы хотите, чтобы разделение пространства оставалось 50/50 по ширине и высоте, вы можете сделать это следующим образом:

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'leading'" 
         style="width: 50%">leading</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">center</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'bottom'" 
         style="height: 50%">bottom</div>
</div>

Обычно центральная область захватывает все дополнительное пространство, когда вы изменяете размер окна, но вы можете установить относительную ширину / высоту в ведущих / верхних / конечных / нижних областях, чтобы они всегда использовали эту долю экрана.

Answer 2

Я думаю, что вы хотите иметь вложенный контейнер границы. По сути, вы хотите, чтобы сверху и по центру (или по центру и снизу), а вверху ставили слева и по центру (или по центру и справа).

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="region: 'top'" style="height: 50%">

        <div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
             data-dojo-props="region: 'left'">inner top left</div>

         <div data-dojo-type="dijit/layout/ContentPane" 
             data-dojo-props="region: 'center'">inner top center</div>
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">outer center</div>
</div>