Sapui5:如何向自定义控件添加按钮列表? [英] Sapui5: How can I add a button list to custom control?

问题描述

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

I am getting data from oModel, and it {msgData} object

          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:

(in xml file, you can see the code below) 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>

如何将按钮列表添加到控件?(按钮列表在 {msgData} 对象中)

How can I add Button list to a control? (Button list is in {msgData} object)

MessageStrip.js

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:{}
    });
});

推荐答案

首先，您不能将 Button 添加到列表中.您必须使用 sap.m.CustomListItem 将 Button 作为内容.

First of all, you cannot add Button to a List. You have to use sap.m.CustomListItem to put a Button as content.

让我们进入关于如何满足您当前对自定义控件的要求的部分.

Let's get to the part about how to meet your current requirement for custom control.

你已经为你的 MessageStrip 定义了一个 aggregations 来放置你的 List

you have define a aggregations for your MessageStrip to put your 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，它为你的MessageStrip扩展了sap/m/MessageStripRenderer.为了在 MessageStrip 中呈现您的列表，您必须从 sap/m/MessageStripRenderer 复制一些代码.

Then you define your own Renderer which extends sap/m/MessageStripRenderer for your MessageStrip. In order to render your list inside a MessageStrip, you have to copy some code from 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，它呈现如下屏幕截图.

I tried the below view XML and it renders like the following screenshot.

<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:如何向自定义控件添加按钮列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！