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

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> 

如何添加按钮列表到控件？ （按钮列表是{} 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

首先，你不能添加按钮列表。您必须使用sap.m.CustomListItem才能将Button作为内容。

让我们来看看如何满足您当前对自定义控件的需求。

你必须定义你的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: {} 
    }); 
}); 

一个aggregations然后你定义自己的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> 

希望它能帮助。谢谢！