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

Posted 2023-02-16

【中文标题】如何以编程方式在 Dijit 对话框中制作和显示表单？

【英文标题】：How to make and display a form in a Dijit Dialog programmatically?

【发布时间】：2013-02-21 10:45:36

【问题描述】：

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

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

我看到的所有示例都使用 Markup，但没有使用 AMD

【问题讨论】：

说到对话和Dojo，你可以考虑阅读我对Simple Login implementation for Dojo MVC和Dojo Dialog with confirmation button的回答。

【参考方案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() 由 Dojo 提供。它加载依赖项（表单、对话框等），然后运行创建小部件的给定函数。但是，由于我们在依赖项中包含了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

【讨论】：

很抱歉这个问题很笨，但是我该如何称呼这个函数呢？

@DevdattaTengshe 我更新了答案。您通常会在页面加载时调用 require，即使您不希望该对话框在稍后显示（但您当然不必这样做）。

这只是修复了“尝试使用 id==xx 注册小部件，但该 id 已注册”错误。我一直在做： myDialog.set("content", popup.domNode);将其更改为 myDialog.set("content", popup);找到这个问题/答案后，我的额外错误就消失了！谢谢你们！