如何以編程方式在Dijit對話框中創建和顯示錶單？

Question

我一直在試圖弄清楚如何使用Dojo 1.7創建和顯示對話框內的表單。

我希望我的對話框看起來像這樣：當你創建一個對話框使用AMD

Answer 1

所有的我都不要使用標記它看到的樣品，但沒有，你可以使用小部件（例如表單）作爲內容。因此，舉例來說，你可以這樣做：

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()由道場提供。它加載依賴關係（表單，對話框等），然後運行創建窗口小部件的給定函數。但是，因爲我們在依賴項中包含domReady!，Dojo會確保DOM完全加載並且首先準備就緒。

因爲我在該函數中也有dia.show()，所以只要頁面打開，對話框就會顯示。比方說，你想顯示在對話框的頁面上的一些按鈕被點擊時代替：

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