FormContainer布局：展开列上的文本区域

Question

我是SAPUI5的新手。作为我的第一个任务，我完成了使用FormContainer构建布局的任务。

模型看起来像这样：

我的源代码：

<form:Form id="00"
    width="100%"
    editable="true"
    visible="true"
>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="Ursachencode"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                    />
                    </form:label>
                    <form:fields>
                        <m:Input value="Erprobung / Machbarkeit fehlend /unzureichend"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="Fehlerschlüssel"
                            design="Standard"
                            width="100%"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:Input value="-"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true" width="200%">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="IST-Zustand"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                            width="100%"
                        />
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Soll-Zustand"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                            width="100%"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements></form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Ursache"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Sofortmaßnahmen"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea maxLength="100"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Anlagen"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:Input
                            value="5 WHY"
                            enabled="false"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
</form:Form>

所以我的问题出在＆＃34; IST-Zustand＆＃34;和＆＃34; Soll-Zustand＆＃34;。我不能让文本区域扩展到两列。有没有办法做到这一点？

Answer 1

以下是一个工作示例：https://embed.plnkr.co/u0WUn2/

• 将GridLayout设置为<Form>。
的布局控件
• 相应地为<FormContainer>申请halfGrid layout data（默认为false）。

上述方法的缺点是它没有响应。如有必要，请通过Device API使表单适应设备大小。例如：halfGrid="{:= ${device>/resize/width} > 600}"。