grid-layout - openui5 网格布局格式化

Question

我有一个 openui5 对话框，其中有网格布局。对话框由一个 xml View 、几个按钮和调用构成

    //
    // 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 View 中我有一个网格。一列用于标签，一列用于用户输入数据的 UI 元素。该元素可以是文本字段、日期选择器、下拉列表等。我计划了 2 列用于标签，6 列用于 UI 元素。到目前为止效果很好。 但现在我有一个新的要求。在第一行中，我想要在文本字段右侧有 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。只要我不执行此按钮，它就会以这种方式工作。为什么“费用类型”标 checkout 现在第一行？我需要做什么才能使行程文本字段跨越 4 列并且 2 按钮位于其旁边？

感谢任何帮助。

谢谢 凯

Answer 1

根据 Grid 的文档，每行的总和为 12。如果您希望文本字段和两个按钮位于一行，您可以指定以下跨度:

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