问题描述
我想设计带有智能字段的以下图片:
当我尝试使用以下代码进行设计时:
<smartForm:GroupElement>
<smartField:SmartField value="{Vermieter}"/>
<smartField:SmartField value="{HIT}" textLabel="HIT"/>
<smartField:SmartField value="{Konzessionär}" textLabel="Konzessionär"/>
</smartForm:GroupElement>
我收到以下结果:
首先缺少标签。
第二个位置不是完全正确。第二项和第三项之间的距离与第一项和第二项之间的距离不同。
有什么建议吗?
更新
由于@MrNajzs的the comment,我取得了以下进展:
<smartForm:GroupElement>
<smartField:SmartLabel labelFor="Vermieter"/>
<smartField:SmartField value="{Vermieter}" id="Vermieter"/>
<smartField:SmartLabel labelFor="HIT"/>
<smartField:SmartField value="{HIT}" id="HIT"/>
<smartField:SmartLabel labelFor="Konzessionaer"/>
<smartField:SmartField value="{Konzessionär}" id="Konzessionaer"/>
</smartForm:GroupElement>
但是仍然存在一些问题。元素仍未调整。输出为:
解决方法
您可以通过在SmartLabel
之前放置SmartField
来“激活”标签。
在SmartLabel
中,您需要通过SmartField
引用Id
(如下所示)
<smartField:SmartLabel labelFor="idHIT" />
<smartField:SmartField id="idHIT" value="{HIT}" textLabel="HIT"/>
要控制布局,您可能需要探索smartField:layoutData
元素。
在其中,您可以使用布局名称空间中的GridData
元素。
但是这里有很多选择。
这是答案。我必须为每个元素使用不同的Group
并使用GridData
布局。
<smartForm:SmartForm flexEnabled="false">
<smartForm:Group >
<smartForm:GroupElement>
<smartField:SmartField value="{RstID}" width="auto" contextEditable="true" >
<smartField:configuration>
<smartField:Configuration preventInitialDataFetchInValueHelpDialog="false" displayBehaviour="descriptionOnly"/>
</smartField:configuration>
</smartField:SmartField>
</smartForm:GroupElement>
</smartForm:Group>
</smartForm:SmartForm>
<smartForm:SmartForm flexEnabled="false">
<smartForm:layout>
<smartForm:Layout labelSpanL="9" labelSpanM="9" labelSpanS="12" columnsL="3" columnsM="3" />
</smartForm:layout>
<smartForm:Group>
<smartForm:layoutData>
<l:GridData span="L4 M3 S6" indent="L1 M3"/>
</smartForm:layoutData>
<smartForm:GroupElement>
<smartField:SmartField value="{Vermieter}"/>
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group>
<smartForm:layoutData>
<l:GridData span="L3 M3 S6"/>
</smartForm:layoutData>
<smartForm:GroupElement>
<smartField:SmartField value="{HIT}"/>
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group>
<smartForm:layoutData>
<l:GridData span="L3 M3 S6"/>
</smartForm:layoutData>
<smartForm:GroupElement>
<smartField:SmartField value="{Konzessionär}"/>
</smartForm:GroupElement>
</smartForm:Group>
</smartForm:SmartForm>
仍然不是一个完美的解决方案,因为可以看出第一行和第二行的空白之间有一些区别,但是仍然可以忽略!