Cuadro de diálogo Dojo con el botón de confirmación

Question

Me gustaría agregar un cuadro de diálogo genérico con los botones "Aceptar" y "Cancelar" que admiten funciones de devolución de llamada.

¿Cómo puedo lograr esto con un Dojo AMD?

Por ejemplo:

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

Aquí está la solución que se me ocurrió cuando había tenido que hacer frente a la misma pregunta. No es completamente programático, pero usar la plantilla hace que el código sea más legible y flexible para los cambios.

mejor ver una vez que escuchar 100 veces, por lo que ver todo el código de abajo viven en jsFiddle: http://jsfiddle.net/phusick/wkydY/

El principio fundamental que empleo es el hecho de que dijit.Dialog::content no sólo puede ser una cadena, sino también un widget ejemplo. Entonces subclases dijit.Dialog para declarar ConfirmDialog clase. En ConfirmDialog::constuctor(), declaro e instanto un widget desde una plantilla y lo configuro para que sea el contenido del diálogo. Entonces puedo conectar onClick acciones en ConfirmDialog::postCreate() método:

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

}) 

El formato de plantilla:

<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> 

Ahora usa ConfirmDialog en lugar de dijit.Dialog:

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

Importante: No se olvide de desconectar cualquiera se conecta a las devoluciones de llamada de los diálogos y destruir el diálogo w gallina cerrada.

Si utiliza ConfirmDialog a menudo y en varios lugares de su código Considera:

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

Su código será más fácil de leer y que no tendrá que hacer frente a la limpieza:

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

Answer 2

Dojo 1.10 incluye un nuevo dijit/ConfirmTooltipDialog con botones incorporados Aceptar y Cancelar.

Answer 3

Aquí se explica cómo usar dijit/ConfirmDialog y configurar sus botones.

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 Confirmar diálogo es muy simple y útil.
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. 
     } 
    }); 
});