Set Field label as HTML String in Ext JS

Question

I have below html string which needs to be set as a fieldLabel of textfield as HTML.

'<p><strong><span style="background-color: rgb(210, 213, 216);">Test</span></strong></p>'

But its not getting converted by compiler in HTML and it shows the string as it is.

I have converted that string to HTML tag using below code.

function decodeHtml(html) {
  var txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

After conversion, HTML tags are displayed as label instead of the html output. whereas if I directly use those tags as a field label, it works fine. Can anyone suggest how can we display the html string as a field label, Any hints will be really appreciated. Below image shows the outputs for different scenarios.

Sample sencha fiddle can be found here

Answer 1

Try using the encodeHtml property set to false

items: [{
            xtype: 'textfield',
            fieldLabel: '<p><strong><span style="background-color: rgb(210, 213, 216);">Test</span></strong></p>',
            encodeHtml: false, // using this seems to work********
            labelSeparator: '',
        }]

Answer 2

You need to do a string replace and then setFieldLabel

Do this in your function:

function decodeHtml(html) {
    var result = html.replaceAll("&", "&")
    .replaceAll("&lt;", "<")
    .replaceAll("&gt;", ">")
    .replaceAll("quot;", '"');

    return result;
}