Question

我在sap.suite.ui.commons.ChartContainer中有按钮（称为BUTTON LEFT）：

<ChartContainer
    id="chartContainer"
    showFullScreen="true"   
    autoAdjustHeight="true">

    <dimensionSelectors>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:Button id="idButton" text="BUTTON LEFT"/>
    </dimensionSelectors> 

    <content>
        <ChartContainerContent
            icon = "sap-icon://line-chart"
            title = "Line Chart">

            <content>
                <viz:VizFrame id="chartContainerVizFrame" height="700px" width="100%" uiConfig="{applicationSet:'fiori'}"></viz:VizFrame>
            </content>
        </ChartContainerContent>
    </content>
</ChartContainer>

我需要将此按钮对齐ChartContainer图例附近的左侧。现在看起来像：

但是我想得到这样的东西：

Here正在运行示例，随时可以编辑它。

我正在寻找将在sap.suite.ui.commons.ChartContainer中的解决方案。如果可能的话，我不想使用css。另外我不能使用ToolbalSpacer的宽度属性（例如width =“100px”），因为我需要在更改屏幕分辨率时更改宽度的ToolbalSpacer。我知道我可以根据屏幕分辨率更改ToolbarSpacer，但我不想使用这种方法。

感谢任何提示。

Answer 1

  <dimensionSelectors>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:ToolbarSpacer/>
       <m:Button id="idButton" text="BUTTON LEFT" />
  </dimensionSelectors>

这是我能为这种情况做的最少的事情。

Answer 2

ChartContainer控件在Chart控件（Personalization，Zoom，Fullscreen ..）之前添加ToolbarSpacer。这个ToolbarSpacer位于Chart控件和＆amp;之间。尺寸选择器。如果隐藏此间隔符，则可以将Button控件与另一个控件旁边对齐。这是一种方法

onAfterRendering : function() {
  oChart = this.getView().byId("chartContainer");
  oChart.getToolbar().getContent()[2].setVisible(false);
}

由于您有一个Toolbarspacer＆amp;一个Button，额外的Spacer将成为ToolBar内容中的第三个控件。

在ChartContainer默认图标附近将按钮对齐到左侧

2 个答案: