1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    50
    Answers
    4
    Vote Rating
    0
    marc123 is on a distinguished road

      0  

    Default Answered: How to render HTML in Ext.MessageBox?

    Answered: How to render HTML in Ext.MessageBox?


    Hello,

    I have a form where I upload a file (xtype: form, fileUpload: true). The fileupload response is a json object with a key "message". I want to display the value of key message in a MessageBox but I can do so only when this key contanis pure text. As soon as it contains html nothing gets displayed.

    This is some code:

    Code:
        Ext.Msg.show({
           title    :    'Error',
           msg        :    action.result.MESSAGE,
           buttons    :    Ext.Msg.OK,
           icon        :    Ext.MessageBox.ERROR,
           minWidth    :    300
        });
    This (Ext.Msg.show()) gets called a s a result of the upload action.

    Below response (taken from firebug) gets displayed:

    {"SUCCESS":false,"FILEPATH":"","MESSAGE":"\\nErroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1\\n"}

    This response gets not displayed:

    {"SUCCESS":false,"FILEPATH":"","MESSAGE":"<ul><li>Erroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1<\/li><\/ul>"}
    Why is this? How can I have the MessageBox render a html string?

    Thanks,

    Marc

  2. Ok, what Ext class allows for rendering of a html bulleted list?

  3. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    50
    Answers
    4
    Vote Rating
    0
    marc123 is on a distinguished road

      0  

    Default


    If I unescape the html characters as the docs say this is my server response:

    {"SUCCESS":false,"FILEPATH":"","MESSAGE":"&lt;ul&gt;&lt;li&gt;Erroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1&lt;\/li&gt;&lt;\/ul&gt;"}

    and this is what gets displayed by the MessageBox:

    <ul><li>Erroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1</li></ul>

    Marc

  4. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    50
    Answers
    4
    Vote Rating
    0
    marc123 is on a distinguished road

      0  

    Default


    Ok, server returned text displays but not correct:

    When the action.result.MESSAGE is

    "&lt;ul&gt;&lt;li&gt;Erroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1&lt;/li&gt;&lt;li&gt;Erroneous Technical name: missing Technical name&lt;/li&gt;&lt;li&gt;Erroneous Purpose: value must be Discharge,Transit or Loaded&lt;/li&gt;&lt;/ul&gt;"and I use Ext.util.Format.htmlDecode(action.result.MESSAGE) to decode that string before displaying it:

    Ext.Msg.show({
    title : 'Error',
    msg : Ext.util.Format.htmlDecode(action.result.MESSAGE),
    buttons : Ext.Msg.OK,
    icon : Ext.MessageBox.ERROR,
    minWidth : 300
    });

    I see in the messagebox:

    Erroneous IMO Code: value must be one of INF, IMDG, BC, IBC, IGC or MARPOL_ANNEX1
    Erroneous Technical name: missing Technical name
    Erroneous Purpose: value must be Discharge,Transit or Loaded

    Note: there are no bullets. However, the HTMLDecoded text _is_ html.

    Looks like the html engine used for the ext.MessageBox is not working (as expected)...

    Marc

  5. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Note that the Ext framework performs an 'HTML/CSS Reset' on load. This means that if you create an HTML bulleted list with no styling declared, it will be rendered according to the default styling applied by Ext.

    The HTML you're returning must declare a prefered CSS class/style":

    Code:
    "<ul class='someCssClass'><li>Erroneous IMO Code:</li></ul>"

  6. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    50
    Answers
    4
    Vote Rating
    0
    marc123 is on a distinguished road

      0  

    Default


    Ok, what Ext class allows for rendering of a html bulleted list?

  7. #6
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    246
    Answers
    2
    Vote Rating
    23
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    You can set the config option styleHtmlContent: true on the component you want standard HTML styles in, or manually assign the class it uses x-html to some DOM container around your content.
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

Thread Participants: 2