Benutzerdefiniertes Steuerelement erweitert sap.m.Dialog

Question

Ich versuche, einen benutzerdefinierten Dialog zu erstellen, um Text und Link in der Fußzeile zusammen mit Schaltflächen anzuzeigen. Ich weiß nicht, wie ich das vorhandene Rendering dafür ändern soll, also schrieb ich einen einfachen Renderer, um das Verhalten zu überprüfen. Dies ist mein Code:

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(); 
    } 
}); 

Aber ich erhalte den Fehler

Dialog.js:6 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined

wenn ich den Knopf am klicken.

Kann jemand darauf hinweisen, was ich falsch mache?

Und wie ändert man das vorhandene Renderer-Verhalten, um Text in der Fußzeile anzuzeigen?

Dies ist, was ich machen möchte:

Answer 1

Der Fehler, den Sie sehen, ist, weil Sie die init() Methode überschrieben und nicht überschrieben init() von Dialog aufgerufen. Also das interne Popup und andere Sachen werden nicht initialisiert. Sie haben die base.init() aufzurufen, auf diese Weise:

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"})); 
    }, 

auch immer Sie die meisten der DialogRenderer s-Code kopieren müssen, um einen voll funktionsfähigen Dialog zu erhalten.

Alternativ können Sie das unmodifizierte DialogRender verwenden und die Dialog._createToolbarButtons() Methode überschreiben Ihre Beschriftung und Link zu Anfang hinzuzufügen:

_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 

Voll Beispiel auf Plunker.