Results 1 to 7 of 7

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    99

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

    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:
    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.)
    Last edited by MikeLowery; 21 Oct 2015 at 2:57 PM. Reason: Added correction and Note at bottom.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    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

  3. #3
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    99

    Default

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

    Currently Info is defined as
    Code:
    INFO   : Ext.baseCSSPrefix + 'msgbox-info'
    A better definition would be:
    Code:
    INFO   : Ext.baseCSSPrefix + 'fa fa-info-circle'

  4. #4
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    99

    Default

    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.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    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?

    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    86

    Default

    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

  7. #7
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    99

    Default

    Quote Originally Posted by url View Post
    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:
    Code:
    .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;
    }

Similar Threads

  1. Replies: 1
    Last Post: 18 Sep 2015, 10:41 AM
  2. ST2 Icons not show in fieldset?
    By JavascriptParrot in forum Sencha Touch 2.x: Q&A
    Replies: 4
    Last Post: 29 Aug 2012, 11:48 PM
  3. tabBarPosition and toolbar icons - why don't icons show if the position is "top"?
    By douglerner in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 28 Dec 2011, 7:40 AM
  4. the icons can not show directly
    By qualifier in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Jul 2008, 6:17 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •