Come creare e visualizzare un modulo in una finestra di dialogo Dijit programmaticamente?

Question

Ho cercato di capire come creare e visualizzare un modulo all'interno di una finestra di dialogo utilizzando Dojo 1.7.

voglio che la mia finestra a guardare qualcosa di simile:

Tutti i campioni che ho visto farlo utilizzando markup, ma nessuno con AMD

Answer 1

Quando si crea una finestra di dialogo, è possibile utilizzare un widget (ad esempio un modulo) come contenuto. Così, per esempio, si potrebbe fare:

require([ 
    "dijit/Dialog", 
    "dijit/form/Form", 
    "dijit/form/TextBox", 
    "dijit/form/Button", 
    "dojo/domReady!" 
], function(Dialog, Form, TextBox, Button) 
{ 
    var form = new Form(); 

    new TextBox({ 
     placeHolder: "Name" 
    }).placeAt(form.containerNode); 

    new Button({ 
     label: "OK" 
    }).placeAt(form.containerNode); 

    var dia = new Dialog({ 
     content: form, 
     title: "Dialog with form", 
     style: "width: 300px; height: 300px;" 
    }); 
    form.startup(); 
    dia.show(); 
});//~require 

require() è fornito da Dojo. Carica le dipendenze (Form, Dialog ecc.) E quindi esegue la funzione specificata che crea i widget. Tuttavia, poiché includiamo domReady! tra le dipendenze, Dojo si assicura che il DOM sia completamente caricato e pronto per primo.

Perché ho dia.show() anche in quella funzione, la finestra di dialogo verrà effettivamente visualizzata non appena viene aperta la pagina. Diciamo che si voleva mostrare la finestra di dialogo quando qualche tasto sulla tua pagina viene cliccato, invece:

require([ 
    "dijit/Dialog", 
    "dijit/form/Form", 
    "dijit/form/TextBox", 
    "dijit/form/Button", 
    "dojo/on",  // Added this! 
    "dojo/domReady!" 
], function(Dialog, Form, TextBox, Button, onEvent) 
{ 
    // ... as above, we create the dialog and form when the page loads 
    // but it remains hidden until we call dia.show() ... 
    form.startup(); 
    // dia.show(); Commented out this! 

    onEvent(document.getElementById("someButtonOnYourPage"), "click", 
     function() 
     { 
      dia.show(); 
     }); 
});//~require