Question

我在SimpleForm控件中设置布局时遇到了一些麻烦。这是XML代码：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <Toolbar>
            <ToolbarSpacer/>
            <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
        </Toolbar>
        <Title text="Business Phone" level="H5" titleStyle="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
        <Label text="Business Extension" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <Input id="businessPhoneExtension" value="{business_phone_extension}">
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </Input>
        <Title text="Business Fax" level="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
    </f:content>
</f:SimpleForm>

我希望第三个字段（商务传真）显示在商务电话＆＃39;领域。相反，它显示如下：

我确定我错过了一些简单的事情。也许我需要使用＆＃39; Form＆＃39;控制而不是？我尝试将一个空标签作为下一个元素，但这似乎也没有用。如果有第四个字段（即商业传真扩展），则布局将排成一行。

任何帮助将不胜感激！谢谢！

更新：

我已经接受了答案中给出的建议。我能够让布局更好地工作，但仍然不是我想要的。这可能就足够了：

我添加了核心：标题＆＃39;尽管我仍然注意到布局中存在一些奇怪之处，但对于这两个群组来说都是如此。我删除了＆＃39; GridData＆＃39;标签，我最终得到了上图中的内容。我也玩过使用工具栏＆＃39;具有相同的效果。我尝试使用＆＃39;核心：工具栏＆＃39;但它抱怨图书馆不存在，尽管文档显示了核心：工具栏＆＃39;作为SimpleForm控件的聚合。这是最终的代码：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <core:Title text="Business Phone"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
        <Label text="Business Extension" design="Bold"/>
        <Input id="businessPhoneExtension" value="{business_phone_extension}"/>
        <core:Title text="Business Fax"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
    </f:content>
</f:SimpleForm>

感谢您的回答！如果有任何其他方式来获得我最初想要的布局，那么额外的输入就会很棒！

Answer 1

编辑：以前的答案并不完全准确。

即使title聚合多重性为0..1，文档也会说新标题或工具栏以形式启动新组（FormContainer）。

因此，有几种选择：

选项1：使用sap.ui.core.Title代替sap.m.Title（@fabiopagoti}
选项2：删除第二个标题
选项3：添加第二个SimpleForm

＆＃13;

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
  <f:content>
    <Toolbar>
        <ToolbarSpacer/>
        <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
    </Toolbar>
    <Title text="Business Phone" level="H5" titleStyle="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
        placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
    <Label text="Business Extension" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <Input id="businessPhoneExtension" value="{business_phone_extension}">
      <layoutData>
          <l:GridData span="XL4 L4 M4 S6"/>
      </layoutData>
    </Input>
  </f:content>
</f:SimpleForm>
<f:SimpleForm id="faxFormSimple" editable="true" layout="ResponsiveGridLayout">
  <f:content>
    <Title text="Business Fax" level="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
  </f:content>
</f:SimpleForm>

＆＃13;

Answer 2

我相信您的表单有问题，因为您使用的是sap.m.Title而不是sap.ui.core.Title。

尝试像这样替换它们

// as is
<Title text="Business Phone" level="H5" titleStyle="H5"/>
// to be
<core:Title text="Business Phone" level="H5" />

像这样，您的表单中会有不同的部分。在所有控件中都没有GridData检查结果。

不要忘记将核心命名空间添加到xml文件

<mvc:View 
 controllerName="your.controller.name"  
 displayBlock="true" 
 xmlns:mvc="sap.ui.core.mvc"
 xmlns:f="sap.ui.layout.form" 
 xmlns:l="sap.ui.layout" 
 xmlns:core="sap.ui.core"
 xmlns="sap.m" >

Answer 3

我最终找到了如何完成我想做的事情。通过将“columnsM”和“columnsL”属性添加到SimpleForm控件，它现在以我想要的格式显示：

{{1}}

现在表单显示如下：

感谢所有回答的人，这很有帮助，我更了解表单布局如何工作！

干杯！

UI5 Simpleform字段布局

3 个答案: