UI5 - проблема с размещением фильтра Comboboxes

Question

У меня есть некоторые комбобокс как часть фильтра для отчета.

Отчет работает нормально. Только проблема заключается в том, что я хотел бы размещать comboboxes в другом порядке, а не в том, как они отображаются прямо сейчас.

Пожалуйста, посмотрите на изображение, как это выглядит сейчас:

Я хотел бы разместить диапазон дат, Дата начала, Дата окончания в первом ряду, а чуть ниже, что я хотел бы set Area, Departed, Line & Статус заказа. SO две линии фильтров.

Мой XML View выглядит следующим образом:

<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>