Dojo Tookit のdijit/Dialog

Dojo Toolkit の dijit/Dialog を利用した疑似モーダルダイアログの表示方法について、以下のポイントを確認できます。

1. dijit/Dialog の基本的な使い方
   dijit/Dialog は Dojo Toolkit の UI コンポーネントで、モーダルダイアログを簡単に作成できます。
   プログラムでインスタンスを作成する場合、以下のように記述します

Javascript

require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
    var myDialog = new Dialog({
        title: "My Dialog",
        content: "Test content.",
        style: "width: 300px"
    });

    // ダイアログを表示するボタン
    document.getElementById("showDialogBtn").onclick = function() {
        myDialog.show();
    };
});

また、HTML の data-dojo-type を使用してマークアップで定義することも可能です。

HTLM

<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Sample Dialog">
    <p>ダイアログの内容</p>
    <button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}">
        閉じる
    </button>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">ダイアログを開く</button>

2. dijit/registry を使用したインスタンス管理
dijit/registry を利用すると、ページ内の dijit インスタンスを管理できます。

Javascript

require(["dijit/registry"], function(registry){
    var dialogInstance = registry.byId("myDialog");
    dialogInstance.show();
});

この方法を使うことで、DOM ノードから dijit/Dialog のインスタンスを取得し、操作することが可能です。

dijit/Dialog 内に dijit のウィジェットを配置した場合、それらのウィジェットは dijit/Dialog の domNode 内に含まれます。管理のポイントは以下の通りです。

1. dijit/Dialog 内のウィジェットの管理

• dijit/Dialog は DOM に追加された後にウィジェットをパース するため、内部の dijit ウィジェットは 通常通り動作 します。
• dijit/registry を使用すると、ダイアログ内のウィジェットを取得できます。

Javascript

require(["dijit/registry"], function(registry){
    var widgetInstance = registry.byId("myWidget");
    console.log(widgetInstance);
});

2. dijit/Dialog の startup() の影響

• dijit/Dialog を プログラムで作成 した場合、内部のウィジェットは startup() を呼び出すことで適切に初期化されます

Javascript

require(["dijit/Dialog", "dijit/form/TextBox", "dojo/domReady!"], function(Dialog, TextBox){
    var myDialog = new Dialog({
        title: "Sample Dialog",
        content: '<input data-dojo-type="dijit/form/TextBox" id="myWidget" />',
        style: "width: 300px"
    });

    myDialog.startup(); // 内部ウィジェットの初期化
    myDialog.show();
});

3. destroyRecursive() を使用したクリーンアップ

• dijit/Dialog を 削除する際 は、内部のウィジェットも適切に破棄する必要があります。

Javascript

require(["dijit/registry"], function(registry){
    var dialogInstance = registry.byId("myDialog");
    dialogInstance.destroyRecursive(); // 内部ウィジェットも含めて削除
});