Ext.MessageBox title with font awesome icon

Question

I was trying to set a fontawesome icon inside an Ext.MessageBox title and i managed to accomplish it using the code below:

Ext.Msg.show({
        //iconCls: 'x-fa fa-times-circle',
        title: '<span class="x-fa fa-exclamation"> Error Title</span>',
        message: 'An error occured!!!!!',
        buttons: Ext.MessageBox.OK,
        width: 400
    });

Reading the docs i found out that i could set the title using a config object for the Ext.panel.Title component.

But setting the config object like the example below was making the title invisible.

title: {
    text: 'Error Title',
    iconCls: 'x-fa fa-exclamation'
}

Also inspecting the view from the Elements tab of Chrome's Developer tools i saw that there is a div element for icons inside the x-paneltitle class.

<div class="x-icon-el x-font-icon" id="ext-element-15"></div>

How can i set the MessageBox title using the Ext.panel.Title config?

Answer 1

You have fallen into a documentation trap there.

The title config is available on the Ext.Panel class instantiation and therefore, technically, also on the Ext.MessageBox instantiation, but not on its show method, which you call on a singleton that has been pre-instantiated for you by Sencha.

The following would technically instantiate a Message Box with a custom title config:

Ext.create('Ext.MessageBox',{
    title: {
        text: 'Error Title',
        iconCls: 'x-fa fa-exclamation'    
    }
});

However, to show the Ext.MessageBox, you have to call the show method, which has been overridden so as to overwrite every custom setting you add to the title config.