如何以编程方式在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