CODEWITHSUNDEEP
javascriptextjsextjs6extjs6-modern
Zoti
Zoti

Reputation: 892

Ext.MessageBox title with font awesome icon

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?

Upvotes: 0

Views: 1495

Answers (2)

ShaneG
ShaneG

Reputation: 1518

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.

Upvotes: 1

Alexander
Alexander

Reputation: 20224

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.

Upvotes: 2

Related Questions