Dojo dijit.Dialog example

programmatically

by schlomm

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">

JavaScript

dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");

dojo.ready(function() {

    dojo.extend(dijit.Dialog, {
        "_setContentAttr": function(content) {
            var contentArea = dojo.query(".dijitDialogPaneContentArea", this.containerNode)[0];
            dojo.attr(contentArea, "innerHTML", content);
        }
    });

    var dlg = new dijit.Dialog({
        id: 'foobar',
        "title": "my dialog",
        "style": "width: 300px;"
    }).placeAt(dojo.body());

    var actionBar = dojo.create("div", {
        "class": "dijitDialogPaneContentArea",
        "innerHTML": "my test dialog with a programmatically actionboar"
    }, dlg.containerNode);
    var actionBar = dojo.create("div", {
        "class": "dijitDialogPaneActionBar"
    }, dlg.containerNode);

    new dijit.form.Button({
        "label": "Ok"
    }).placeAt(actionBar);
    new dijit.form.Button({
        "label": "Cancel"
    }).placeAt(actionBar);

    dlg.startup();
    dlg.show();

    setTimeout(function() {
        dijit.byId('foobar').set('content', 'new content!');
    }, 2000);
});