SAPUI5 - Responsive sap.m.Table

Question

我用它的头文件headerToolbar创建了一个sap.m.table。

在标题中，我将标题和两个SelectList分隔开，并由ToolbarSpacer分隔。

的问题是，当屏幕尺寸较小的headerToolbar元素不回去到下一行，并截断......

在大屏幕上：

在小屏幕上：

我想报头是respons如果没有足够的空间，那么元素应该到达下一行。

下面是代码：

<headerToolbar height="auto"> 

<Toolbar height="auto"> 

      <content> 

      <Title id="tableHeader" text="..."/> 

      <ToolbarSpacer /> 

      <Label text="..." lableFor="sl1"/> 
       <SelectList id="sl1" 
       enabled="true"> 
       <core:Item key="..." text="..." /> 
       <core:Item key="..." text="..." /> 
       </SelectList> 

       <ToolbarSpacer /> 

      <Label text="..." lableFor="sl2"/> 
       <SelectList id="sl2" 
       enabled="true"> 
       <core:Item key="..." text="..." /> 
       <core:Item key="..." text="..." /> 
       </SelectList> 

       <ToolbarSpacer /> 

       </content> 

      </Toolbar> 

     </headerToolbar> 

Answer 1

为什么不使用OverflowToolbar而不是工具栏？ 是官方的响应工具栏 https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview

如果你不喜欢它，并希望你所描述的这种“弹出式”的行为，我想你可以把你的Flexbox的工具栏里面，并设置取决于方向属性“设备”模型。 使用表达式绑定将是这样的：

new sap.m.FlexBox({ 
    direction: "{= ${device>/isPhone} ? 'Column' : 'Row' }", 
    items: [ 
     //Your content goes here    
    ] 
}) 

这里更多：https://sapui5.hana.ondemand.com/#docs/guide/69a8e469fbde46e7b8916250080effbd.html

Answer 2

您可以启用水平表中的CSS滚动：

.enableTableScrolling { 
    overflow-x: scroll; 
} 

之后表将不会被截断。