UI5 - 过滤组合框放置问题

Question

我已将一些组合框设置为报告过滤器的一部分。

报告工作正常。唯一的问题是我想以不同的顺序放置组合框，而不是现在如何显示它们。

请查看图片现在的样子：

我想将日期范围，开始日期，结束日期放在前排，而我想设置Area，Departed，Line＆amp;订单状态。所以有两行过滤器。

我的XML视图如下所示：

 <Panel headerText="Order Report Filters" expandable="true"
                                                    id="filterPanel" expand="onPanelExpand" expanded="true">
                                                    <content>

                                                     <f:SimpleForm editable="true" layout="ResponsiveGridLayout"
                                                            id="mainform" labelSpanL="6" labelSpanM="6"
                                                            adjustLabelSpan="false" emptySpanL="0" emptySpanM="1"
                                                            columnsL="2" columnsM="2" class="formTitleStyle">

                                                            <f:content>

                                                                <core:Title />                                                       
                                                                <Label text="Date Range">
                                                                <layoutData>
                                                                        <l:GridData span="L6 M6 S6"/>
                                                                    </layoutData>

                                                                </Label>
                                                                <Select id="dateRangeSelect" items="{ path: '/DateRangeFilter'}"
                                                                    change="onDateRangeFilterSelect">
                                                                    <core:Item key="{key}" text="{display}" />
                                                                </Select>
                                                                <Label text="Start Date">
                                                                    <layoutData>
                                                                        <l:GridData span="L6 M6 S6"/>
                                                                    </layoutData>
                                                                </Label>
                                                                <DatePicker id="startDate" enabled="false"
                                                                    change="onStartDateSelect" valueFormat="yyyy-MM-dd" placeholder="Choose Start Date ... "
                                                                     />
                                                                <Label text="End Date">
                                                                  <layoutData>
                                                                        <l:GridData span="L6 M6 S6"/>
                                                                    </layoutData>
                                                                </Label>
                                                                <DatePicker id="endDate" enabled="false"
                                                                    change="onEndDateSelect" valueFormat="yyyy-MM-dd" placeholder="Choose End Date ... "
                                                                    />

                                                                <core:Title />  
                                                                <Label id="idAreaLabel" visible="false">
                                                                    <layoutData>
                                                                        <l:GridData span="L5 M5 S5"/>
                                                                    </layoutData>
                                                                </Label>
                                                                <Select id="areaSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                                    change="onAreaSelect" visible="false" forceSelection="false">
                                                                    <core:Item key="{ID_ORG_AREA}" text="{DS_VALUE}" />
                                                                </Select>

                                                                <Label id="idDepartmentLabel" visible="false" text="Department">
                                                                    <layoutData>
                                                                        <l:GridData span="L5 M5 S5"/>
                                                                    </layoutData>
                                                                </Label>
                                                                <Select id="departmentSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                                    change="onDepartmentSelect" visible="false" enabled = "false" forceSelection="false">
                                                                    <core:Item key="{ID_ORG_DEPARTMENT}" text="{DS_VALUE}" />
                                                                </Select>


                                                                <Label id="idAssetLabel" visible="true" text="Line123">
                                                                    <layoutData>
                                                                        <l:GridData span="L5 M5 S5"/>
                                                                    </layoutData>
                                                                </Label>
                                                                 <Select id="assetSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                                    change="onAssetSelect" enabled = "false" forceSelection="false">
                                                                    <core:Item key="{ID_ORG_ASSET}" text="{DS_VALUE}" />
                                                                </Select>


                                                               <Label id="idOrderStatusLabel" visible="true" text="Order Status">
                                                                    <layoutData>
                                                                        <l:GridData span="L5 M5 S5"/>
                                                                    </layoutData>
                                                                </Label>
                                                                <Select id="orderStatusSelect" items="{ path: '/OrderStatus'}"
                                                                    change="loadTableData" visible="true" forceSelection="false">
                                                                    <core:Item key="{key}" text="{display}" /> 
                                                               </Select>                                                                                                                        

                                                            </f:content> 
                                                        </f:SimpleForm> 

                                                    </content>
                                                </Panel>

我尝试了<span>标记的各种排列和组合，但无法做到。

任何人都可以提供一些输入吗？

谢谢！

Answer 1

正如我从你提到的问题中所理解的那样，Xml代码试试：

<Panel headerText="Order Report Filters" expandable="true"
                            id="filterPanel" expand="onPanelExpand" expanded="true">
                            <content>

                                    <f:SimpleForm editable="true" layout="ResponsiveGridLayout"
                                            id="mainform" labelSpanL="6" labelSpanM="6" adjustLabelSpan="false"
                                            emptySpanL="0" emptySpanM="0" columnsL="4" columnsM="4"
                                            class="formTitleStyle">

                                            <f:content>

                                                    <core:Title />
                                                    <Label text="Date Range">
                                                            <layoutData>
                                                                    <l:GridData span="L6 M6 S6" />
                                                            </layoutData>

                                                    </Label>
                                                    <Select id="dateRangeSelect" items="{ path: '/DateRangeFilter'}"
                                                            change="onDateRangeFilterSelect">
                                                            <core:Item key="{key}" text="{display}" />
                                                    </Select>

                                                    <core:Title />
                                                    <Label text="Start Date">
                                                            <layoutData>
                                                                    <l:GridData span="L6 M6 S6" />
                                                            </layoutData>
                                                    </Label>
                                                    <DatePicker id="startDate" enabled="false"
                                                            change="onStartDateSelect" valueFormat="yyyy-MM-dd"
                                                            placeholder="Choose Start Date ... " />

                                                    <core:Title />
                                                    <Label text="End Date">
                                                            <layoutData>
                                                                    <l:GridData span="L6 M6 S6" />
                                                            </layoutData>
                                                    </Label>
                                                    <DatePicker id="endDate" enabled="false"
                                                            change="onEndDateSelect" valueFormat="yyyy-MM-dd"
                                                            placeholder="Choose End Date ... " />

                                                    <core:Title /> 

                                                    <core:Title />
                                                    <Label id="idAreaLabel" visible="true" text="Dropdown" >
                                                            <layoutData>
                                                                    <l:GridData span="L5 M5 S5" />
                                                            </layoutData>
                                                    </Label>
                                                    <Select id="areaSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                            change="onAreaSelect"  forceSelection="false">
                                                            <core:Item key="{ID_ORG_AREA}" text="{DS_VALUE}" />
                                                    </Select>

                                                    <core:Title />
                                                    <Label id="idDepartmentLabel" visible="true" text="Department">
                                                            <layoutData>
                                                                    <l:GridData span="L5 M5 S5" />
                                                            </layoutData>
                                                    </Label>
                                                    <Select id="departmentSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                            change="onDepartmentSelect" enabled="false"
                                                            forceSelection="false">
                                                            <core:Item key="{ID_ORG_DEPARTMENT}" text="{DS_VALUE}" />
                                                    </Select>

                                                    <core:Title />      
                                                    <Label id="idAssetLabel" visible="true" text="Line123">
                                                            <layoutData>
                                                                    <l:GridData span="L5 M5 S5" />
                                                            </layoutData>
                                                    </Label>
                                                    <Select id="assetSelect" items="{ path: '/Rowsets/Rowset/0/Row'}"
                                                            change="onAssetSelect" enabled="false" forceSelection="false">
                                                            <core:Item key="{ID_ORG_ASSET}" text="{DS_VALUE}" />
                                                    </Select>

                                                    <core:Title />
                                                    <Label id="idOrderStatusLabel" visible="true"
                                                            text="Order Status">
                                                            <layoutData>
                                                                    <l:GridData span="L5 M5 S5" />
                                                            </layoutData>
                                                    </Label>
                                                    <Select id="orderStatusSelect" items="{ path: '/OrderStatus'}"
                                                            change="loadTableData" visible="true" forceSelection="false">
                                                            <core:Item key="{key}" text="{display}" />
                                                    </Select>

                                            </f:content>
                                    </f:SimpleForm>

                            </content>
                    </Panel>