override messagebox and add icons to the default buttons

Question

Does anyone know here how to override the messagebox to put icons for the buttons? i.e: check icon for YES/OK, cross button for NO, etc.

I've tried to override the makeButton function of Ext.window.MessageBox but it doesn't seem to work and doesn't even hit the debugger:

Ext.override(Ext.window.MessageBox, {
    makeButton: function (btnIdx) {
        debugger;
        var btnId = this.buttonIds[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            minWidth: 75,
            iconCls: ['check', 'no', 'cancel', 'blah'][btnId]
        });
    }
});

Answer 1

As @scebotari66 have stated, Ext.Msg and Ext.MessageBox are singletons of Ext.window.MessageBox. So when you override Ext.window.MessageBox.makeButton, this will have no effect if you are using the singletons for this class.

However, there is a way to apply your overrides to Ext.window.MessageBox to the singleton. Guess how.

(drumroll)

tantantanan!

Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();

Yep, that's correct. You just need to re-assign the singleton after your override.

So:

Ext.override(Ext.window.MessageBox, {
    makeButton: function (btnIdx) {
        var btnId = this.buttonIds[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            iconCls: ['okbutton', 'yesbutton', 'closebutton', 'cancelbutton'][btnIdx],
            minWidth: 75 //or you can also remove this to make the icons close to the label
        });
    }
});
//re-assign singleton to apply overrides
Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();

Next time you call Ext.Msg.alert(), your icons are now showing too.

I hope you find this helpful.

NOTE: The iconCls config should be in the order [ok, yes, no, cancel]