Jak programowo wyświetlić i wyświetlić formularz w oknie dialogowym Dijit?

Question

Próbuję dowiedzieć się, jak utworzyć i wyświetlić formularz wewnątrz okna dialogowego przy użyciu przystawki Dojo 1.7.

chcę mój dialogowe wyglądać mniej więcej tak:

wszystkich próbek Widziałem zrób to za pomocą znaczników, ale żaden z użyciem AMD

Answer 1

Podczas tworzenia okna dialogowego, można użyj widgetu (np. formularza) jako treści. Możesz na przykład:

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() jest dostarczany przez Dojo. Ładuje zależności (formularz, okno dialogowe itp.), A następnie uruchamia daną funkcję, która tworzy widżety. Jednakże, ponieważ uwzględniliśmy domReady! wśród zależności, Dojo upewnia się, że DOM jest w pełni załadowany i gotowy jako pierwszy.

Ponieważ w tej funkcji również mam dia.show(), okno dialogowe będzie wyświetlane zaraz po otwarciu strony. Powiedzmy, że chciał pokazać okno kiedy jakiś przycisk na swojej stronie kliknięciu zamiast:

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