PDA

View Full Version : How to render HTML in Ext.MessageBox?



marc123
28 Aug 2012, 3:15 AM
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:


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

marc123
28 Aug 2012, 3:38 AM
If I unescape the html characters as the docs say (http://docs.sencha.com/ext-js/3-4/#%21/api/Ext.form.BasicForm-cfg-fileUpload)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

marc123
28 Aug 2012, 4:53 AM
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

friend
28 Aug 2012, 6:31 AM
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":



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

marc123
28 Aug 2012, 7:06 AM
Ok, what Ext class allows for rendering of a html bulleted list?

themightychris
28 Aug 2012, 4:10 PM
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.