自定义控件扩展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未捕获的TypeError：无法读取未定义的属性'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上的完整示例。