sapui5 Vizframe and IconTabBar

问题

I want to develop a sapui5-view with a Tab-View. On the first tab there have to be two donut-charts (sap.viz.ui5.controls). For Tab-View I'm using the IconTabBar. I can display the charts without the IconTabBar but when I implement the chart-view in the tab-view everthing is empty. Also when I put the two donut-charts in a HorizontalLayout. Has anyone an idea?

kind regards Kirsten

Tab-View:
<Page id="detail_Tab" title="{i18n>Title}" showNavButton="false" >
        <IconTabBar>
            <items>
                <IconTabFilter text="Overview">
                    <mvc:XMLView viewName="{...}.view.Detail_Overview"/>
                </IconTabFilter>

            </items>
        </IconTabBar>
    </Page>

Detail_Overview:

    <viz:VizFrame 
        id="idDonutChartPriority" 
        height="100%" 
        width="100%"></viz:VizFrame>

回答1:

I would guess that you have a problem with the height="100%" property of your VizFrames. Try setting them to a px size. You can try that here on JSBin.

The height of the IconTabBar is fitted to its contents. If your Content has a height of 100% it will result into 100% of zero.

If you want to use 100% you could try to set stretchContentHeight="true" on your IconTabBar. It determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.

回答2:

 <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" controllerName="view1">
<IconTabBar>
          <items>
              <IconTabFilter text="Overview">
                  <viz:VizFrame 
                    id="sample" 
                    height="500px" 
                    width="100%"></viz:VizFrame>
              </IconTabFilter>
          </items>
      </IconTabBar>
</mvc:view>

回答3:

I am going to take a guess, that you made the same mistake I did and copied the sample code blindly, without realizing that some of the properties are meant to be used with layout elements.

Unless you are using another container for the VizFrame simply remove the height="100%" property from VizFrame and it will adapt on its own.

来源：https://stackoverflow.com/questions/36652194/sapui5-vizframe-and-icontabbar

标签

xml

sap

sapui5