Пользовательский контроль расширения 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 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined

, когда я нажав на кнопку.

Может кто-нибудь указать, что я делаю неправильно?

И как изменить существующее поведение рендеринга для отображения текста в нижнем колонтитуле?

Это то, что я хочу сделать:

Answer 1

Ошибки вы видите, это потому, что вы перезаписать метод init() и не назвали перезаписаны 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.