Fatal编程技术网
  • sapui5/
  • Sapui5 UI5 Simpleform字段布局

Sapui5 UI5 Simpleform字段布局

sapui5

Sapui5 UI5 Simpleform字段布局,sapui5,Sapui5,在SimpleForm控件中设置布局时遇到一些问题。以下是XML代码： <f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers"> <f:content> <Toolbar> <ToolbarSpacer/> <Button

在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>
我希望第三个字段（商务传真）显示在“商务电话”字段下面。相反，它显示为：

我肯定我错过了一些简单的东西。也许我需要改用“Form”控件？我试着把一个空标签作为下一个元素，但这似乎也不起作用。如果有第四个字段（即商务传真分机），则布局将对齐

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

更新：

我已采纳了答案中给出的建议。我能够让布局工作得更好一点，尽管仍然不是我想要的。这可能就足够了：

我在两个“组”中都添加了“核心：标题”，尽管我仍然注意到布局中的一些奇怪之处。我删除了“GridData”标签，最后得到了上图中的内容。我还玩了一个“工具栏”，它也有同样的效果。我尝试使用“core:Toolbar”，但它抱怨库不存在，尽管文档显示“core:Toolbar”是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>
谢谢你的回答！如果有任何其他的方式来拥有我最初想要的布局，额外的输入将是伟大的

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

尽管
title
聚合多重性为0..1，但文档中确实指出新标题或工具栏会在表单中启动一个新组（FormContainer）

因此，有几种选择：

  • 选项1:使用
    sap.ui.core.Title
    而不是
    sap.m.Title
    （by）
  • 选项2:删除第二个标题
  • 选项3:添加第二个SimpleForm
编辑：之前的答案并不完全准确

尽管
title
聚合多重性为0..1，但文档中确实指出新标题或工具栏会在表单中启动一个新组（FormContainer）

因此，有几种选择：

  • 选项1:使用
    sap.ui.core.Title
    而不是
    sap.m.Title
    （by）
  • 选项2:删除第二个标题
  • 选项3:添加第二个SimpleForm
我认为您的表单有问题，因为您使用的是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" >
我认为您的表单有问题，因为您使用的是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" >
我最终发现了如何做我想做的事情。通过向SimpleForm控件添加“columnsM”和“columnsL”属性，它现在以我想要的格式显示：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers" columnsM="1" columnsL="1">
    <f:content>
        <core:Title text="Business Phone"/>
        <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="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>
        <core:Title text="Business Fax"/>
        <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>
现在，表单显示如下所示：

感谢所有回答的人，这很有帮助，我现在对表单布局的工作方式有了更好的理解

干杯

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

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers" columnsM="1" columnsL="1">
    <f:content>
        <core:Title text="Business Phone"/>
        <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="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>
        <core:Title text="Business Fax"/>
        <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>