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?

It works. I just would like to know how i could do it using the Ext.panel.Title config. — Zoti, Dec 14 '17 at 15:13

score 2 · Accepted Answer · answered Dec 14 '17 at 15:18

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.

ShaneG · Answer 2 · 2017-12-14T15:23:33.007

1

This works for me:

Ext.Msg.show({
  title: {
    text: 'Error Title',
    iconCls: 'x-fa fa-exclamation'
  },
  message: 'You are closing a tab that has unsaved changes. Would you 
  like to save your changes?',
  buttons: Ext.Msg.YESNOCANCEL,
  icon: Ext.Msg.QUESTION,
  fn: function(btn) {
    if (btn === 'yes') {
        console.log('Yes pressed');
    } else if (btn === 'no') {
        console.log('No pressed');
    } else {
        console.log('Cancel pressed');
    }
  }
});

Used it here: https://docs.sencha.com/extjs/6.0.2/classic/Ext.window.MessageBox.html

It is Classic 6.0.2 but it should still work.

edited Dec 14 '17 at 15:23

answered Dec 14 '17 at 15:22

ShaneG

1,498
7
16

1

We are talking `modern`, not `classic`, unfortunately. It won't work with modern because `Ext.Msg` configs are just different enough not to be compatible at all. – Alexander Dec 14 '17 at 15:23
@Alexander Ah i see now. Not available in Modern. I have also fallen for Sencha's Doc's trap :) – ShaneG Dec 14 '17 at 15:26
If you run it in modern (inside a sencha fiddle) you will see that there is no title. (you need to change the buttons too buttons: Ext.MessageBox.OK) – Zoti Dec 14 '17 at 15:31

Ext.MessageBox title with font awesome icon

2 Answers2