ExtJs create custon icon for Ext.MessageBox

extjs, extjs4, javascript

Solution

The icon config option is just a CSS class, define a new one like:

.check-icon {
    background-image: url(../img/check.png');
    background-repeat: no-repeat;
}

Then in config:

icon: 'check-icon'

Should do what you want.

Problem

I have an ExtJs form which upon receiving a response from server shows a pop-up based on whether the submit was successful or not. The code looks like this: ``` if (form.isValid()) { form.submit({ success: function (form, action) { Ext.Msg.alert('Success', action.result.msg); }, failure: function (form, action) { Ext.MessageBox.show({ title:'Failure', msg: action.result.msg, buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); } }); } ``` Now, rather than having an alert message for the success, I'd like to also have a Message box with a 'check' icon. It doesn't look like it is available in ExtJS in the same way as Ext.MessageBox.ERROR, so I was wondering how I can create a custom icon to appear there?

Original source