CustomDialogWithDojo.js

define([
    'dojo/ready',
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dijit/Dialog',
    'dojox/layout/TableContainer',
    'dojox/layout/ScrollPane',
    'dijit/Toolbar',
    'dijit/form/Button'
], function(ready, declare, lang, Dialog, TableContainer, ContentPane, Toolbar, Button) {
    return declare(Dialog, {
        /**
         * @cfg {_Widget[]} top toolbar items.
         */
        tbarItems: null,
        /**
         * @cfg {_Widget[]} bottom toolbar items.
         */
        bbarItems: null,
        /**
         * @cfg {Boolean} defines, if 'Close' button on bottom toolbar is present.
         */
        showBottomClose: true,
        /**
         * @cfg {_Widget} content of modal window. Required.
         */
        centerContent: null,
        /**
         * @function defines submit action (if any), also makes 'Submit' button on bottom toolbar visible.
         */
        onSubmit: null,
        /**
         * @cfg {String} defines Submit button label.
         */
        submitLabel: 'Submit',
        /**
         * @cfg {String} defines Close button label.
         */
        closeLabel: 'Close',
        /**
         * @function this function (not constructor) should be overriden. Here initializes children's content.
         */
        initDialog: function() {},
        /**
         * @cfg {String|Integer} defines Height of Status Bar.
         */
        statusBarHeight: '20px',
        baseClass: 'slimDialog',
        constructor: function() {
            this.initDialog(arguments[0]);

            lang.mixin(this, arguments[0]);
            var _this = this;

            if (!this.centerContent) {
                return;
            }

            var _layout = new TableContainer({
                cols: 1,
                orientation: 'vert'
            });

            // Top toolbar
            var _tbarItems = this.tbarItems || [];
            if (_tbarItems.length) {
                var _menu = new Toolbar();
                for (var i = 0; i < _tbarItems.length; i++) {
                    _menu.addChild(_tbarItems[i]);
                }
                _layout.addChild(_menu);
            }

            // Content
            lang.mixin(this.centerContent, {
                style: {padding: 0}
            });
            _layout.addChild(this.centerContent);

            // Status bar
            var _statusBar = new ContentPane({
                style: {height: _this.statusBarHeight, display: 'none'}
            });

            var _showMsg = function(message, clazz) {
                _statusBar.set('style', {display: message ? 'block' : 'none'});
                _statusBar.set('class', clazz);
                _statusBar.set('content', message);
                _layout.layout();
            };

            this.showErrorMsg = function(message) {
                _showMsg(message, 'alert alert-error');
            };

            this.showOkMsg = function(message) {
                _showMsg(message, 'alert alert-success');
            };

            this.showInfoMsg = function(message) {
                _showMsg(message, 'alert alert-info');
            };

            this.clearMsg = function() {
                _showMsg('', '');
            };

            _layout.addChild(_statusBar);

            // Bottom toolbar
            var _bottomLayout = new TableContainer({
                cols: 2,
                spacing: 0,
                showLabels: false
            });
            var _dialogButtons = new Toolbar({
                style: { textAlign: 'right' }
            });
            var _bbarItems = this.bbarItems || [];
            if (this.onSubmit && this.onSubmit instanceof Function) { // submit button
                _dialogButtons.addChild(new Button({
                    label: _this.submitLabel,
                    iconClass: 'icon16 acceptIcon',
                    onClick: function() {
                        _this.clearMsg();
                        if (!_this.validate()) {
                            return;
                        }
                        _this.onSubmit();
                    }
                }));
            }
            if (this.showBottomClose) { // close button
                _dialogButtons.addChild(new Button({
                      label: _this.closeLabel,
                    iconClass: 'icon16 cancelIcon',
                    onClick: function() {
                        _this.hide();
                    }
                }));
            }

            if (_bbarItems.length) {
                var _buttons = new Toolbar();
                for (var i = 0; i < _bbarItems.length; i++) {
                    _buttons.addChild(_bbarItems[i]);
                }
                if(_buttons.hasChildren()) {
                    _bottomLayout.addChild(_buttons);
                }
            }

            if(_dialogButtons.hasChildren()) {
                _bottomLayout.addChild(_dialogButtons);
                _layout.addChild(_bottomLayout);
            }

            this.content = _layout;

            ready(function() {
                setTimeout(function() {
                    _this.show();
                }, 100);
            });
        },
        onHide: function () {
            this.destroyRecursive();
        }
    });
});