Ext.MsgBox.show icons don't appear in Modern

[MikeLowery]

Ext version tested:

• Ext 6.0.1.250 Modern

Browser versions tested against:

• Chrome Version 45.0.2454.93 m

Description:

• Ext.MsgBox.show with an iconCls does not display the icon. This works for Classic, but not for Modern Triton, Neptune, or Cupertino.

Steps to reproduce the problem:

• https://fiddle.sencha.com/#fiddle/ujf

The result that was expected:

• Messagebox should have a WARNING icon

The result that occurs instead:

• Messagebox does NOT have any icon

Note: Original posting specified "icon", not "iconCls" (which is what we are really using.)

[Gary Schlosberg]

Thanks for the report. I don't believe this is supported for the modern toolkit yet. The docs indicate that the icon config is private.
http://docs.sencha.com/extjs/6.0/6.0...geBox-cfg-icon

[MikeLowery]

Then Ext.MessageBox.INFO, etc should be redefined in terms of font-awesome.

Currently Info is defined as

INFO   : Ext.baseCSSPrefix + 'msgbox-info'

A better definition would be:

INFO   : Ext.baseCSSPrefix + 'fa fa-info-circle'

[MikeLowery]

We did some more testing, see https://fiddle.sencha.com/#fiddle/ujf

• Triton Classic icon - x-fa fa-warning icon shows up at left in the text area, but is not styled
• Triton Classic icon - Ext.MessageBox.WARNING icon shows up at left of text area and is styled
• Triton Classic iconCls - x-fa fa-warning icon shows up at the left in the title bar.
• Triton Modern icon - x-fa fa-warning nothing happens
• Triton Modern iconCls - x-fa fa-warning icon shows up at left in the text area, but is not styled

Title bar icons are nice, but icons in the text area stand out more, especially for errors.

We would like to suggest that for Triton Modern, to be consistent with Touch, that:

1. iconCls show up in the text and be styled appropriately. (If iconCls is going to be used other places for the title icon, then the text iconCls could be renamed - although maybe titleIconCls is more appropriate for the title icon.)
2. Ext.MessageBox.WARNING, etc, be changed to font awesome definitions.

[Daniil]

The docs indicate that the icon config is private.
http://docs.sencha.com/extjs/6.0/6.0...geBox-cfg-icon

Yes, but Ext.MessageBox.show() docs still shows the "icon" setting available:
http://docs.sencha.com/extjs/6.0.2-m...ml#method-show

But using the "icon" setting throws an error:
DOM element with id ext-toolbar-1 in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()

Fiddle:
https://fiddle.sencha.com/#fiddle/1dt5

Yeah, now I got that the "icon" setting is not supported, but I was relying on the .show() docs. It would help others in the future if the docs would be updated getting rid of the "icon" setting.

UPDATE:

Once/if you are on reviewing the docs, the multiline config appears to be not supported as well. If use it then ExtJS outputs the following in the console:
No such config "multiline" for class Ext.MessageBox

Fiddle:
https://fiddle.sencha.com/#fiddle/1dta

As well, if multiline is not supported, then, I guess, the defaultTextHeight setting doesn't make sense?

[url]

Any fix around this???

Can anyone share working example of Messagebox with icon in ext6.2 modern

https://fiddle.sencha.com/#fiddle/li
Need similar component in ext6.2 modern

[MikeLowery]

Any fix around this???

Can anyone share working example of Messagebox with icon in ext6.2 modern

https://fiddle.sencha.com/#fiddle/li
Need similar component in ext6.2 modern

In 6.0.2 Modern we use iconCls and set it to

• (Ext.MessageBox.WARNING) "x-fa fa-warning";
• (Ext.MessageBox.INFO) "x-fa fa-info-circle";
• (Ext.MessageBox.QUESTION) "x-fa fa-question-circle";
• (Ext.MessageBox.ERROR) "x-fa fa-times-circle";

And some CSS:

.x-msgbox .x-icon.x-fa.fa-question-circle,
.x-msgbox .x-icon.x-fa.fa-info-circle {
    color: blue;
}
.x-msgbox .x-icon.x-fa.fa-warning {
    color: orange;
}
.x-msgbox .x-icon.x-fa.fa-times-circle {
    color: red;
}