forms - 如何以编程方式在 Dijit 对话框中制作和显示表单？

Question

我一直试图弄清楚如何使用 Dojo 1.7 在 Dialog 内创建和显示表单。

我希望我的对话框看起来像这样：

我见过的所有样本都使用标记，但没有使用 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