Finestra di dialogo Dojo con pulsante di conferma

Question

Vorrei aggiungere una finestra di dialogo generica con i pulsanti "Ok" e "Annulla" per supportare le funzioni di callback.

Come posso ottenere questo risultato con un Dojo AMD?

Ad esempio:

myDialog = new Dialog ({ 

    title: "My Dialog", 
    content: "Are you sure, you want to delete the selected Record?", 
    style: "width: 300px", 
    onExecute:function(){ //Callback function 
     console.log("Record Deleted") 
    }, 
    onCancel:function(){ 
     console.log("Event Cancelled") } 
    }); 
    // create a button to clear the cart 
    new Button({ label:"Ok" 
     onClick: myDialog.onExecute() 
    } 

    new Button({ label:"Cancel" 
     onClick: function(){ myDialog.onCancel() } 
    } 

Answer 1

Ecco la soluzione mi è venuta quando ho dovuto affrontare la stessa domanda. Non è completamente programmatico, ma l'utilizzo del modello rende il codice più leggibile e flessibile per le modifiche.

meglio vedere una volta che sentire 100 volte, in modo da vedere tutto il codice qui sotto vivono a jsFiddle: http://jsfiddle.net/phusick/wkydY/

Il principio fondamentale io impiego è il fatto che dijit.Dialog::content può non solo essere una stringa, ma anche un widget esempio. Quindi sottoclassi dijit.Dialog per dichiarare la classe ConfirmDialog. In ConfirmDialog::constuctor() dichiaro e istanziamo un widget da un modello e lo imposto come contenuto della finestra di dialogo. Poi cablare onClick azioni ConfirmDialog::postCreate() metodo:

var ConfirmDialog = declare(Dialog, { 

    title: "Confirm", 
    message: "Are you sure?", 

    constructor: function(/*Object*/ kwArgs) { 
     lang.mixin(this, kwArgs); 

     var message = this.message; 

     var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { 
      templateString: template, //get template via dojo loader or so 
      message: message  
     })); 
     contentWidget.startup(); 
     this.content = contentWidget; 
    }, 

    postCreate: function() { 
     this.inherited(arguments); 
     this.connect(this.content.cancelButton, "onClick", "onCancel"); 
    } 

}) 

Il markup modello:

<div style="width:300px;"> 

    <div class="dijitDialogPaneContentArea"> 
    <div data-dojo-attach-point="contentNode"> 
     ${message}    
    </div> 
    </div> 

    <div class="dijitDialogPaneActionBar"> 

    <button 
     data-dojo-type="dijit.form.Button" 
     data-dojo-attach-point="submitButton" 
     type="submit" 
    > 
     OK 
    </button> 

    <button 
     data-dojo-type="dijit.form.Button" 
     data-dojo-attach-point="cancelButton" 
    > 
     Cancel 
    </button> 

    </div> 

</div> 

Ora usano ConfirmDialog invece di dijit.Dialog:

var confirmDialog = new ConfirmDialog({ message: "Your message..."}); 
confirmDialog.show(); 

Importante: Non dimenticare di scollegare qualsiasi si connette alle finestre di dialogo dei callback e distrugge il dialogo w gallina chiusa

Se si utilizza ConfirmDialog spesso e in più punti del codice Considerate questo:

var MessageBox = {}; 
MessageBox.confirm = function(kwArgs) { 
    var confirmDialog = new ConfirmDialog(kwArgs); 
    confirmDialog.startup(); 

    var deferred = new Deferred(); 
    var signal, signals = []; 

    var destroyDialog = function() { 
     array.forEach(signals, function(signal) { 
      signal.remove(); 
     }); 
     delete signals; 
     confirmDialog.destroyRecursive(); 
    } 

    signal = aspect.after(confirmDialog, "onExecute", function() { 
     destroyDialog(); 
     deferred.resolve('MessageBox.OK'); 
    }); 
    signals.push(signal); 

    signal = aspect.after(confirmDialog, "onCancel", function() { 
     destroyDialog(); 
     deferred.reject('MessageBox.Cancel');    
    }); 
    signals.push(signal); 

    confirmDialog.show(); 
    return deferred; 
} 

Il codice sarà più leggibile e non avrete a che fare con la pulizia:

MessageBox.confirm().then(function() { 
    console.log("MessageBox.OK") 
}); 

Answer 2

Dojo 1.10 include un nuovo dijit/ConfirmTooltipDialog con pulsanti OK e Annulla integrati.

Answer 3

Ecco come utilizzare dijit/ConfirmDialog e configurare i suoi pulsanti.

require(["dijit/ConfirmDialog"], function(ConfirmDialog){ 

    // create instance 
    var dialog = new ConfirmDialog({ 
     title: "Session Expiration", 
     content: "the test. Your session is about to expire. Do you want to continue?", 
     style: "width: 300px" 
    }); 

    // change button labels 
    dialog.set("buttonOk","Yes"); 
    dialog.set("buttonCancel","No"); 

    // register events 
    dialog.on('execute', function() { /*do something*/ }); 
    dialog.on('cancel', function() { /*do something*/ }); 

    // show 
    dialog.show(); 
}); 

Answer 4

Dojo Confirm Dialog è molto semplice e disponibile.
http://dojotoolkit.org/reference-guide/1.10/dijit/ConfirmDialog.html

require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){ 
    myDialog = new ConfirmDialog({ 
     title: "My ConfirmDialog", 
     content: "Test content.", 
     buttonCancel: "Label of cancel button", 
     buttonOk: "Label of OK button", 
     style: "width: 300px", 
     onCancel: function(){ 
      //Called when user has pressed the Dialog's cancel button, to notify container. 
     }, 
     onExecute: function(){ 
      //Called when user has pressed the dialog's OK button, to notify container. 
     } 
    }); 
});