Codeology

I haven’t posted in quite a while so I thought I’d pass up a quick alteration to the standard Ext.MessageBox.

Now the original Ext.MessageBox works well however a lot of my windows have buttons with images, including the buttons like “OK” and “Cancel”. In order to keep with the look and feel I decided to add this functionality to ExtJS. Why they haven’t done this already is beyond me, the change was relatively simple.

You will need to patch the Ext.MessageBox code, there is a function called updateButtons you will need to change like so:

var updateButtons = function(b){
        var width = 0,
            cfg;
        if(!b){
            Ext.each(buttonNames, function(name){
                buttons[name].hide();
            });
            return width;
        }
        dlg.footer.dom.style.display = '';
        Ext.iterate(buttons, function(name, btn){
            cfg = b[name];
            if(cfg){
                btn.show();

                if (Ext.isObject(cfg)) {
                    if (Ext.isString(cfg.icon)) btn.setIconClass(cfg.icon);

                    btn.setText(Ext.isString(cfg.text) ? cfg.text : Ext.MessageBox.buttonText[name]);
                } else {
                    btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
                }

                width += btn.getEl().getWidth() + 15;
            }else{
                btn.hide();
            }
        });
        return width;
    };

And that’s basically it. You can then do this:

Ext.MessageBox.show({
    ...
    buttons: {
        ok: {
            text: "Whatever",
            icon: "whatever-css-class"
        }
    },
    ...
});

To prove it works here is two screenshots of before and after the fix:

Before	After

It should be completely backwards compatible, all your original Ext.MessgeBox code will work as originally intended with no modification.

If you don’t want to patch ExtJS directly I’ve ripped the Ext.MessageBox code completely and formed a new variant called Ext.ux.MessageBox which you can use instead. You can get the code to this here.