Question

我从oModel获取数据，它是{msgData}对象

          var Buttons = [{text:"apple"},{text:"banana"}]; 
          var sQuery = "some text...";

          oModel.oData.msgData.push({
                Type : "Information",
                buttons:Buttons,
                customIcon:"media/chat/b_small.png",
                Text: sQuery
            });

            oModel.refresh();

（在xml文件中，您可以看到下面的代码）的 XML ：

    <wt:MessageStrip
        text="{msgData>Text}"
        type="{msgData>Type}"
             >

        // ***** NEED TO ADD THESE LINES ****
        <List  items="{msgData>buttons}" class="fixFlexFixedSize BtnBox">
            <Button press="BtnClick" text="{msgData>text}" class="sapUiTinyMarginEnd"/>
        </List>

    </wt:MessageStrip>

如何将Button列表添加到控件？（按钮列表在{msgData}对象中）

MessageStrip.js

    sap.ui.define(["sap/m/MessageStrip"],
    function (MessageStrip) {
    "use strict";
    return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller
                                   .fragments.MessageStrip", {
        metadata: {
            properties: {
            },
            aggregations: {
            },
            events: {
            }
        },

        init: function () {
        },

        renderer:{}
    });
});

Answer 1

首先，您无法将Button添加到List。您必须使用sap.m.CustomListItem将Button作为内容。

让我们来看看如何满足您当前的自定义控制要求。

您已为aggregations定义MessageStrip以放置List

sap.ui.define(["sap/m/MessageStrip"],
function (MessageStrip) {
    "use strict";
    return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller.fragments.MessageStrip", {
        metadata: {
            properties: {
            },
            aggregations: {
                list: { type: "sap.m.ListBase", multiple: false }
            },
            events: {
            }
        },

        init: function () {
            MessageStrip.prototype.init.call(this);
        },

        renderer: {}
    });
});

然后，您为自己的Renderer定义了自己的sap/m/MessageStripRenderer MessageStrip。要在MessageStrip中呈现列表，您必须从sap/m/MessageStripRenderer复制一些代码。

sap.ui.define(['sap/ui/core/Renderer', 'sap/m/MessageStripRenderer'],
function (Renderer, MessageStripRenderer) {
    "use strict";

    var MessageStripRenderer = Renderer.extend(MessageStripRenderer);

    MessageStripRenderer.render = function (oRm, oControl) {

        this.startMessageStrip(oRm, oControl);
        this.renderAriaTypeText(oRm, oControl);

        if (oControl.getShowIcon()) {
            this.renderIcon(oRm, oControl);
        }

        this.renderTextAndLink(oRm, oControl);
        //Render your list aggregation
        oRm.renderControl(oControl.getAggregation("list"));

        if (oControl.getShowCloseButton()) {
            this.renderCloseButton(oRm);
        }

        this.endMessageStrip(oRm);
    }

    return MessageStripRenderer;

}, true);

我尝试了以下视图XML，它呈现如下截图。

<wt:MessageStrip text="DUMMY">
    <wt:list>
        <List>
            <items>
                <CustomListItem><Button text="1" /></CustomListItem>
                <CustomListItem><Button text="2" /></CustomListItem>
                <CustomListItem><Button text="3" /></CustomListItem>
            </items>
        </List>
    </wt:list>
</wt:MessageStrip>

希望它有所帮助。谢谢！

Sapui5：如何向自定义控件添加按钮列表？

1 个答案: