ExtJS 5.1 - MessageBox Variations

Fiddle exploring the message boxes (pop-ups) available in the ExtJS (5.1) framework.

HTML

<script src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all-debug.css">
<script src="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js"></script>
<link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/classic/resources/sencha-charts-all-debug.css">

CSS

.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd.x-accordion-hd-sibling-expanded {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}
.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}
body#ext-element-1 {
    background-image: url(http://dev.sencha.com/ext/5.1.0/examples/kitchensink/crisp-en/resources/images/square.gif) !important;
    background-repeat: repeat;
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slide-up;
    -webkit-animation-name: slide-up;
}
div.x-panel-header {
    padding-top: 10px;
    background-image: url(http://dev.sencha.com/ext/5.1.0/examples/kitchensink/crisp-en/resources/images/header-bg.png) !important;
}
div.x-panel-header div.x-title-text {
    color: #ffffff;
}
div.custom-menu-title {
    background-color: #2A3F5D !important;
    padding: 5px;
}
div.custom-menu-title div.x-title-text {
    color: #ffffff;
}
div.custom-menu-title-close-btn {
    background-color: #2A3F5D !important;
    padding: 5px;
    margin-left: -1px;
    margin-bottom: -1px;
}
div.console {
    margin-top: 20px;
    margin-left: 750px;
    text-align: left;
    font-family: Courier, "Courier New";
    font-size: x-small;
}
div.error {
    color: red;
    font-weight: bold;
}
@-moz-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}
@-webkit-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

JavaScript

var meta = {
    fiddleHeader: 'Message Box Variations',
    fiddleSubHeader: 'Fiddle exploring the <a href="http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.MessageBox" target="_blank">Ext.Msg</a> class. ' +
    '<br />'
};

Ext.define('Fiddle.Msg', {
    requires: [
        'Ext.window.MessageBox'
    ],
    statics: {
        showError: function (title, msg, ismodal, fn) {
            var Msg = Ext.Msg;
            Msg.resizable = true;
            Msg.show({
                title: title,
                message: msg,
                modal: ismodal,
                buttons: Msg.YES,
                icon: Msg.ERROR,
                width: 300,
                fn: fn
            });
        },
        showModalInfo: function (title, msg, fn) {
            var Msg = Ext.Msg;
            Msg.resizable = true;
            Msg.show({
                title: title,
                message: msg,
                modal: true,
                buttons: Msg.OK,
                icon: Msg.INFO,
                width: 300,
                fn: fn
            });
        },
        showModalWarning: function (title, msg, fn) {
            var Msg = Ext.Msg;
            Msg.resizable = true;
            Msg.show({
                title: title,
                message: msg,
                modal: true,
                buttons: Msg.OK,
                icon: Msg.WARNING,
                width: 300,
                fn: fn
            });
        },
        showModalQuestion: function (title, msg, count, fn) {
            var Msg = Ext.Msg,
                dialogTitle = count > 0 ? title + ' (' + count + ')' : title,
                rc = count + 1;
            Msg.resizable = true;
            Msg.show({
                    title: dialogTitle,
                    message: msg,
                    modal: true,
                    buttons: Msg.YESNO,
                    icon: Msg.QUESTION,
                    width: 300,
                    fn: function (btn) {
                ...