Dojo Layout in Dialog

by joshuaboshi

HTML

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

JavaScript

require([
    "dojo/dom",
    "dijit/Dialog",
    "dijit/form/Button",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
    ], function(dom, DijitDialog, Button, BorderContainer, ContentPane) {

    (new Button({
        label: 'Show dialog',
        onClick: function() {

            var dialog = new DijitDialog({
                title: 'dialog title',
                style: {
                    width: '400px',
                    height: '400px',
                }
            });

            // border container for dialog content
            var dialogLayout = new BorderContainer({
                design: "headline",
                style: "width: 100%; height: 100%;"
            }, dialog.containerNode);

            // content pane for buttons at botom
            var buttonsPane = new ContentPane({
                region: "bottom",
                style: {
                    height: '50px'
                }
            }).placeAt(dialogLayout);

            // content pane for center content
            var centerContentPane = new ContentPane({
                region: "center",
                content: 'center content'
            }).placeAt(dialogLayout);
            
            // place button to button content pane
            (new Button({
                label: 'Cancel',
                style: {
                    float: 'right'
                }
            })).placeAt(buttonsPane.containerNode, 'last');
            
            // place button to button content pane
            (new Button({
                label: 'OK',
                style: {
                    float: 'right'
                }
            })).placeAt(buttonsPane.containerNode, 'last');

            dialogLayout.startup();

            dialog.show();

        }
    })).placeAt(document.body);




})