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视图中我有一个网格。标签的一列，用户输入其数据的UI元素的一列。这个元素可以是textfield，datepicker，dropdown等等。我为标签计划了2列，为UI元素计划了6列。到目前为止工作正常。但现在我有了新的要求。在第一行中，我想要2个小按钮直接到文本字段。所以我给了文本字段只有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。只要我不做这个按钮就行了，就这样。为什么＆＃34;费用类型＆＃34;标签出现在第一行？我该怎么做才能使旅行的文本字段超过4列，而2按钮就在它旁边？

感谢任何帮助。

由于启

Answer 1

根据Grid的文档，每行的总和为12.如果要将文本字段和两个按钮放在一行中，可以指定以下范围：

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

Answer 2

我不知道网格布局，但我尝试使用矩阵布局。您可以更好地控制行，并且仍然具有类似布局的网格。由于我在XML视图方面没有经验，我很遗憾无法帮助您处理代码，但这里是相关文档：https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/MatrixLayout.html

Answer 3

您应该在视图中添加defaultSpan属性：

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

根据API-doc，这指定了＆＃34; cols＆＃34;网格中的元素可以使用。 L，M和S是屏幕分辨率。 Grid-Layout中最大cols数为12。

openui5网格布局格式

3 个答案: