渲染自定义控件

时间:2017-12-04 15:06:21

标签: javascript sapui5

我目前在渲染 sap.suite.ui.microchart.InteractiveDonutChart 时遇到问题。我想在自定义控件中呈现它。当我尝试渲染像 sap.m.Text 这样的简单控件时,它可以正常工作。但是,它没有圆环图。尽管如此,在控制器中生成这样的圆环图也可以。关于为什么这不起作用的任何想法?它没有给我任何错误......

聚合

aggregations: {
                content: {
                    type: "sap.ui.core.Control",
                    multiple: true,
                    singluarName: "content"
                }
            }

渲染器

        //start of content
        oRM.write("<div ");
        oRM.addClass("cardContent");
        oRM.writeClasses();
        oRM.write(">");
        oRM.renderControl(oControl.getChosenControl());
        oRM.renderControl(oControl.getChosenControl2());
        oRM.write("</div>"); // close div 3
        //end of content

功能

getChosenControl: function() {
        var flexBox = new sap.m.FlexBox({
            width: "90%",
            alignItems: "Center"
        });

        var textField = new sap.m.Text({
            text: "Dynamically created textfield"
        });

        flexBox.addItem(textField);
        return flexBox;
    },

    getChosenControl2: function() {

        var flexBox = new sap.m.FlexBox({
            width: "90%",
            alignItems: "Center"
        });

        var donutChart = new sap.suite.ui.microchart.InteractiveDonutChart();

        for (var i = 0; i < 3; i++) {
            var segment = new sap.suite.ui.microchart.InteractiveDonutChartSegment();
            segment.setLabel("Parter");
            segment.setValue(50);
            segment.setDisplayedValue("50 %");

            donutChart.addSegment(segment);
        }


        flexBox.addItem(donutChart);
        return flexBox;
    }

1 个答案:

答案 0 :(得分:0)

我实际上自己找到了解决方案。我首先使用'AddContent'方法将其添加到我的聚合'content'中。下一步是使用'getContent'方法获取内容。最后一步是渲染返回的内容。

            //start of content
                oRM.write("<div ");
                oRM.addClass("cardContent");
                oRM.writeClasses();
                oRM.write(">");

                //add content
                oControl.addContent(oControl.getChosenControl2());

                //get content
                var items = oControl.getContent();

                //render items      
                for (var i = 0; i < items.length; i++) {
                    oRM.renderControl(oControl.getContent()[i]);
                }

                oRM.write("</div>"); // close div 3
                //end of content