如何扩展“sap.m.Dialog”以将自定义内容添加到对话框页脚？

Question

我正在尝试创建一个自定义对话框来显示页脚中的一些文本和链接以及按钮。我不知道如何更改现有的渲染，因此我编写了一个简单的渲染器来检查行为。这是我的代码：

sap.m.Dialog.extend("EnhancedDialog",{

  metadata:{
    properties:{
      footerLabelText:{type:"string",defaultValue:null},
      footerLinkText:{type:"string",defaultValue:null},
      footerLinkHref:{type:"string",defaultValue:null}
    },
    aggregations:{
      _label:{type:"sap.m.Label",multiple:false,visibility:"hidden"},
      _link:{type:"sap.m.Link",multiple:false,visibility:"hidden"}
    },
    events:{}
  },

  init:function(){
    this.getAggregation("_label", new sap.m.Label({text:"Check"}));
    this.getAggregation("_link",new sap.m.Link({text:"Link"}));
  },

  setFooterLabelText:function(oLabelText){
    this.setProperty("footerLabelText",oLabelText,true);
    this.getAggregation("_label").setText(oLabelText);
  },

  setFooterLinkText:function(oLinkText){
    this.setProperty("footerLinkText",oLinkText,true);
    this.getAggregation("_link").setText(oLinkText);
  },

  setFooterLinkHref:function(oLinkHref){
    this.setProperty("footerLinkHref",oLinkHref,true);
    this.getAggregation("_link").setHref(oLinkHref);
  },

  renderer:{
    render:function(oRM,oControl){
      oRM.write("<div");
      oRM.writeControlData(oControl);
      oRM.writeClasses();
      oRM.write(">");
      oRM.renderControl(oControl.getAggregation("_label"));
      oRM.renderControl(oControl.getAggregation("_link"));
      oRM.write("</div");   
    }
  }
});

var enhancedDialog=new EnhancedDialog();
var btn=new sap.m.Button({
  text:"Click Here!",
  press: function(){
    enhancedDialog.open();
  }
});

但我收到错误

Dialog.js：6 未捕获类型错误：无法读取未定义的属性“setInitialFocusId”

当我点击按钮时。

有人可以指出我做错了什么吗？

以及如何更改现有渲染器行为以在页脚中显示文本？

这就是我想做的：

Answer 1

您看到的错误是因为您覆盖了该init()方法并且没有调用 Dialog 的覆盖init()。因此内部弹出窗口和其他内容不会被初始化。你必须这样调用base.init()：

  init:function(){
    sap.m.Dialog.prototype.init.apply(this,arguments);
    this.getAggregation("_label", new sap.m.Label({text:"Check"}));
    this.getAggregation("_link",new sap.m.Link({text:"Link"}));
  },

但是，您需要复制大部分DialogRenderer代码才能获得功能齐全的对话框。

或者，您可以使用未修改的 DialogRender 并覆盖该Dialog._createToolbarButtons()方法以将标签和链接添加到开头：

  _createToolbarButtons:function () {
    Dialog.prototype._createToolbarButtons.apply(this,arguments);
    var toolbar = this._getToolbar();
    var toolbarContent = toolbar.getContent();
    toolbar.removeAllContent();
    toolbar.addContent(this.getAggregation("_label"));
    toolbar.addContent(this.getAggregation("_link"));
    // insertContent is not implemented correctly...
    toolbarContent.forEach(function(control){toolbar.addContent(control)});
  },
  renderer:DialogRenderer

Plunker上的完整示例。