GridLayout - Платформа CUBA. Руководство по разработке приложений

4.5.2.2.3. GridLayout

GridLayout - контейнер, располагающий компоненты по сетке.

XML-имя компонента: grid.

Пример использования контейнера:

<grid spacing="true">
    <columns count="4"/>
    <rows>
        <row>
            <label value="Date" align="MIDDLE_LEFT"/>
            <dateField datasource="orderDs" property="date"/>
            <label value="Customer" align="MIDDLE_LEFT"/>
            <lookupField datasource="orderDs" property="customer"
                         optionsDatasource="customersDs"/>
        </row>
        <row>
            <label value="Amount" align="MIDDLE_LEFT"/>
            <textField datasource="orderDs" property="amount"/>
        </row>
    </rows>
</grid>

Элементы grid:

columns - обязательный элемент, описывает колонки сетки. Должен либо иметь атрибут count, либо вложенные элементы column для каждой колонки.

В простейшем случае достаточно задать число колонок в атрибуте count. Тогда, если ширина всего контейнера явно задана в пикселах или процентах, незанятое место будет распределяться между колонками равными долями.

Для распределения незанятого места неравными долями необходимо определить для каждой колонки элемент column и задать для него атрибут flex.

Пример сетки, в которой вторая и четвертая колонки занимают все лишнее место по горизонтали, причем четвертая колонка забирает себе в три раза больше лишнего места:

<grid spacing="true" width="100%">
    <columns>
        <column/>
        <column flex="1"/>
        <column/>
        <column flex="3"/>
    </columns>
    <rows>
        <row>
            <label value="Date"/>
            <dateField datasource="orderDs" property="date" width="100%"/>
            <label value="Customer"/>
            <lookupField datasource="orderDs" property="customer"
                         optionsDatasource="customersDs" width="100%"/>
        </row>
        <row>
            <label value="Amount"/>
            <textField datasource="orderDs" property="amount" width="100%"/>
        </row>
    </rows>
</grid>

Если атрибут flex не указан, или указано значение 0, то ширина данной колонки будет установлена по содержимому, если хотя-бы одна другая колонка имеет ненулевой flex. В приведенном примере первая и третья колонки получат ширину по максимальной длине текста надписей.

Tip	Для того, чтобы лишнее место вообще образовалось, необходимо установить всему контейнеру ширину в пикселах или процентах. В противном случае ширина колонок будет рассчитана по ширине содержимого, и атрибут `flex` не будет иметь никакого эффекта.

rows − обязательный элемент, содержит последовательность строк. Каждая строка определяется в своем элементе row.

Элемент row может содержать атрибут flex, аналогичный описанному для column, но влияющий на распределение лишнего места по вертикали при заданной общей высоте сетки.

Элемент row должен содержать элементы компонентов, отображаемых в ячейках данной строки сетки. Число компонентов в одной строке не должно превышать заданного количества колонок, но может быть меньше.

Любой компонент, находящийся в контейнере grid, может иметь атрибуты colspan и rowspan. Эти атрибуты задают соответственно сколько колонок и строк будет занимать данный компонент. Например, так можно растянуть поле Field3 на три колонки:

<grid spacing="true">
    <columns count="4"/>
    <rows>
        <row>
            <label value="Field1"/>
            <textField/>
            <label value="Field2"/>
            <textField/>
        </row>
        <row>
            <label value="Field3"/>
            <textField colspan="3" width="100%"/>
        </row>
    </rows>
</grid>

В результате компоненты будут располагаться следующим образом:

Атрибуты grid: align - enable - height - id - margin - spacing - styleName - visible - width
Элементы grid: columns - rows
Атрибуты columns: count
Атрибуты column: flex
Атрибуты row: flex - visible