Ext js add to the Ext msg a "don't ask anymore" checkbox

Question

How can I add to my Ext.Msg a checkbox with a text "don't ask anymore" so that the user doesn't have to always confirm that he wants to do a specific action (in my case send a message)?

This is my code:

Ext.Msg.show({
   title: 'Send Message',
   message: 'Are you sure you want to send the message?'
   buttons: Ext.Msg.YESNO,
   fn: function(btn) {
         if (btn === 'yes') {
                 ...
         } else if (btn === 'no') {
                ...
         }
   }
});

Answer 1

I see here several ways, the most trivial is using cookies to remember the user decision IN THE BROWSER. Another solution is to remember the decision on server side, in this case there will be no dependency on the browser. In the following sample I have used cookies and wrapped the Ext.msg.show(...) in another singleton class.

Ext.define('CustomMsg', {
    singleton: true,
    cookiePrefiex: 'DontShowMessageBox',
    cookieToolbarId: 'CookieToolbar',

    show: function (messageBoxId, config) {
        var cookieName = this.getCookieName(messageBoxId),
            me = this;

        if(Ext.util.Cookies.get(cookieName) === 'true') {
            return;
        }
        var msgBox = Ext.Msg.show(config);
        this.addCookieToolbar(cookieName, msgBox);
        msgBox.on('hide', function(msgBox) {
            this.removeCookieToolbar(msgBox);
        }, this, {single: true});
    },

    addCookieToolbar: function(cookieName, msgBox) {
        msgBox.add({
            xtype: 'toolbar',
            itemId: this.cookieToolbarId,
            items: [{
                xtype: 'checkbox',
                fieldLabel: "don't ask anymore",
                listeners: {
                    change: function (checkbox, newValue) {
                        Ext.util.Cookies.set(cookieName, newValue);
                    }
                }
            }]
        });
        return this;
    },

    removeCookieToolbar: function(msgBox) {
        var cookieToolbar = msgBox.getComponent(this.cookieToolbarId);
        if(cookieToolbar) {
            msgBox.remove(cookieToolbar);
        }
        return this;
    },

    getCookieName(checkBoxId) {
        return this.cookiePrefiex + '-' + checkBoxId;
    }
});

Fiddle

You can also create your own MessageBox at the base of Ext.panel.Panel, in this case you will not have to implement the toolbar injection mechanism.