openui5 grid layout formatting

Question

У меня есть диалог openui5 с сеткой в ​​нем. Диалог создается с точки зрения XML, пару кнопок и вызов

// 
    // Create view 
    // 
    var view = sap.ui.view({ 
     type:sap.ui.core.mvc.ViewType.XML, 
     viewName:"some.viewname" 
    }); 

    blahDialog = new sap.ui.commons.Dialog({ 
     modal : true, 
     title: "Create New Blah", 
     buttons : [ btnSave, btnCancel ], 
     content : [ view ] 
    }); 

в представлении XML У меня есть сетка. Один столбец для метки, один столбец для элемента пользовательского интерфейса, пользователь вводит свои данные. Этот элемент может быть текстовым полем, датпикером, выпадающим списком, что угодно. Я запланировал 2 столбца для метки, 6 для элементов пользовательского интерфейса. Пока работает хорошо. Но теперь у меня есть новое требование. В первой строке я хочу, чтобы две маленькие кнопки были справа от текстового поля. Поэтому я дал текстовое поле только 4 столбца, а остальные 2 - для новых кнопок, по 1 для каждого. Кнопки содержат только значок, поэтому они не очень большие. Это как диалог выглядит следующим образом:

https://dl.dropboxusercontent.com/u/25030606/pic.png

Вот XML:

<mvc:View xmlns:c="sap.ui.core" 
     xmlns:mvc="sap.ui.core.mvc" 
     xmlns:l="sap.ui.layout" 
     xmlns="sap.ui.commons" 
     controllerName="exporgui5.expensedialog" 
     xmlns:html="http://www.w3.org/1999/xhtml" 
     width="360px"> 
<l:Grid> 
<l:content> 
    <Label text="Trip"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <TextField width="100%" value="Some value" editable="false"> 
    <layoutData> 
     <l:GridData span="L4"/> 
    </layoutData> 
    </TextField> 
    <Button icon="icons/luggage--plus.png"><layoutData> 
     <l:GridData span="L1"/> 
    </layoutData> 
    </Button> 
    <Button icon="icons/bin-metal-full.png"><layoutData> 
     <l:GridData span="L1"/> 
    </layoutData> 
    </Button> 
    <Label text="Expense Type"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <DropdownBox id="drpExpenseType" 
       items="{expTypes>/k}" 
       displaySecondaryValues="true" 
       change="onExpTypeChange" width="100%"> 
    <layoutData> 
     <l:GridData span="L6"/> 
    </layoutData> 
    <c:ListItem text="{expTypes>shortName}" additionalText="{expTypes>description}" key="{expTypes>id}"/> 
    </DropdownBox> 
    <Label text="Date"> 
    <layoutData> 
     <l:GridData span="L2" /> 
    </layoutData> 
    </Label> 
    <DatePicker locale="DE" id="date" yyyymmdd="{svModel>/dateValue}" change="onDateChange" width="100%"> 
    <layoutData> 
     <l:GridData span="L6" /> 
    </layoutData> 
    </DatePicker> 
</l:content> 
</l:Grid> 
</mvc:View> 

Я думал, что в одном ряду я могу поместить элементы, ширина суммы до некоторого общего числа столбцов, в моем случае это 8. И до тех пор, пока я не делаю эту кнопку, это работает так. Почему ярлык «Тип расходов» отображается в первой строке? Что мне нужно сделать, чтобы текстовое поле для прохода превышало 4 столбца, а кнопка 2 находилась рядом с ним?

Любая помощь приветствуется.

Благодаря Кай

Answer 1

Я не знаю, о расположении сетки, но я бы попробовать использовать макет матрицы. У вас будет больше контроля над вашими строками, и у вас будет сетка, подобная макету. Как я не знаком с представлениями XML, я, к сожалению, не могу помочь вам с кодом, но вот связанная с ним документация: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/MatrixLayout.html

Answer 2

Согласно документации Grid, сумма в строке равна 12. Если вы хотите есть текстовое поле и две кнопки в одном ряду можно назначить следующие пролеты:

TextField: 8 
Button 1: 2 
Button 2: 2 
    SUM: 12 

Answer 3

вы должны добавить атрибут defaultSpan к вашему Вид:

<l:Grid 
    ... 
    defaultSpan="L3 M5 S12" 
> 

Согласно API-doc это указывает количество «cols», которое может использовать элемент в сетке. L, M и S - разрешения экрана. Максимальное количество столбцов составляет 12 в Grid-Layout.