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> 

希望它能幫助。謝謝！