Useful wrapper for Ext.Js messages

Ext.ux.Messages.js

Ext.define('Ext.ux.Messages', {
    _messages: Ext.MessageBox,

    accessDeniedMessage: [
        "<span style='font-weight:bold;'>Недопустимая операция.</span><br/>",
        "Доступ закрыт. Если вы считаете, что это ошибочно, пожалуйста, обратитесь в службу технической поддержки."
    ].join(''),

    eTypes: {
        SDS: 'exception.sds',
        CLIENT: 'exception.ui'
    },

    id: 'wic-box-' + Ext.id(),

    _confirmCfg: {
        width: 400,
        title: "Подтверждение",
        buttons: Ext.Msg.OKCANCEL,
        icon: Ext.Msg.QUESTION
    },

    _infoCfg: {
        width: 400,
        title: "Информация",
        buttons: Ext.Msg.OK,
        icon: Ext.Msg.INFO
    },

    _errorCfg: {
        width: 400,
        title: "Ошибка",
        buttons: Ext.Msg.OK,
        icon: Ext.Msg.ERROR
    },

    _defaultMessageXTemplate: new Ext.XTemplate(
        "<div class='box-wrapper'>",
            "<div class='box-message'>{msg}</div>",
            "<div id='{id}-box-details' class='box-details'></div>",
        "</div>"
    ),

    constructor: function () {
        if(Ext.isArray(this._messages.childEls)) { // for Ext 4.x
            this._messages.childEls.push('displayfield');
        }
        else if(Ext.isObject(this._messages.childEls)){ // for Ext 5.x
            this._messages.childEls.displayfild = 'displayfield';
        }
        this._messages.on('afterrender', this.onMessagesRender, this);
    },
    /**
     * @private
     */
    onMessagesRender: function (c) {
        if (c.displayfield) {
            c.displayfield.setStyle('width', '100%');
        }
    },
    /**
     * Method creates details fieldset when message box showed
     * @private
     */
    applyDetails: function (renderData) {
        this._messages.on('show', function () {
            // DOIT! Trying to use one details pane instance.
            // Currently can't do this, becuase when rerender pane, extjs throw runtime error.

            var detailsPane = new Ext.form.FieldSet({
                collapsible: true,
                collapsed: true,
                margin: '5 0 5 0',
                title: "<span class='title'>Подробнее</span>",
                tpl: new Ext.XTemplate(
                    "<dl class='blue-notes'>",
                        "<tpl if='exceptionType'>",
                            "<dt>Exception</dt><dd>{exceptionDetails}</dd>",
                            "<dt>Type</dt><dd>{exceptionType}</dd>",
                            "<dt>Requested URL</dt><dd>{url}</dd>",
                        "<tpl else>",
                            "<dd>{details}</dd>",
                        "</tpl>",
                    "</dl>"
                )
            });

            detailsPane.render(Ext.fly(this.id + '-box-details'));

            detailsPane.on('collapse', function () {
                this._messages.updateLayout();
            }, this);

            detailsPane.on('expand', function () {
                this._messages.updateLayout();
            }, this);

            detailsPane.update(Ext.isString(renderData) ? {details: renderData} : renderData);

            this._messages.updateLayout();
        }, this, {single: true});
    },
    /**
     * Showing confirmation message
     * @param {Object} cfg
     * @param {Array} [args] details and function or just function
     * @param {Object} opts
     * @private
     */
    show: function (cfg, args, opts) {
        var message = args[0],
            details;

        opts = opts || {};

        args = args.slice(1);

        if (!Ext.isString(message)) {
            throw Ext.Error.raise('Message has not applicable type. Please pass string into this.');
        }

        opts.msg = this._defaultMessageXTemplate.applyOut({msg: message, id: this.id}, []).join('');

        if (Ext.isString(args[0]) || Ext.isObject(args[0])) { // details
            details = args[0];
            args = args.slice(1);
        }

        if (Ext.isFunction(args[0])) { // callback func
            opts.fn = args[0];
        }

        if (Ext.isObject(args[1])) { // scope
            opts.scope = args[1];
        }

        if (!Ext.isEmpty(details)) {
            this.applyDetails(details);
        }

        return this._messages.show(Ext.apply({}, opts, cfg));
    },
    /**
     * Just show access denied error message
     * @public
     */
    accessDenied: function (message, opts) {
        if(Ext.isObject(message)){
            opts = message;
        }

        this.error(
            message || this.accessDeniedMessage, opts
        );
    },
    /**
     * @public
     */
    info: function (message) {
        this.show(this._infoCfg, [message].concat(Array.prototype.slice.call(arguments, 1)));
    },
    confirm: function (message) {
        this.show(this._confirmCfg, [message].concat(Array.prototype.slice.call(arguments, 1)));
    },
     /**
     * Handle `exception` json {Object} and show error message with some additions or {String} message or {Array} of messages
     * For example `exception` obj looks like:
     *      {
     *          data: {
     *              exceptionType: "type",
     *              exceptionDetails: "details",
     *              url: "url"
     *          },
     *          message: 'Sample message'
     *          success: false
     *      }
     * @param {Object|String|Array} message - json exception object or string or array of messages
     * @param {Object} [opts] options which will passed as configuration obj to {@link Ext.MessageBox}
     * @public
     */
    error: function (message, opts) {
        var args = Array.prototype.slice.call(arguments, 1);

        if (Ext.isArray(message) && Ext.isEmpty(message)) { // validation errors
            if (message[0].hasOwnProperty('msg')) {
                message = Ext.Array.pluck(message, 'msg');
            }
            message = message.join(',<br/>');
        }

        if (Ext.isObject(message)) { //handling default json exception object
            var exception = Ext.isObject(message.data) ? message.data : {
                    exceptionDetails: 'An unknown error occurred.',
                    exceptionType: this.eTypes.CLIENT
                },
                eType = exception.exceptionType;

            if (eType === this.eTypes.SDS) {
                message = exception.exceptionDetails;
            }
            else {
                message = message.message;
            }

            this.show(this._errorCfg, [message, exception].concat(args), opts);
        }
        else {
            this.show(this._errorCfg, [message].concat(args), opts);
        }
    }
}, function () {
    if (typeof WIC !== 'undefined') {
        WIC.Messages = WIC.Msg = new this();
    }
});