forms - プログラムで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()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