CODEWITHSUNDEEP
javajavascripthtmlextjsencoding
dbalakirev
dbalakirev

Reputation: 1963

ExtJs Combobox displayField encoding

I have a java web application. I have an entity class which (after transformation of course) i would like to use in a combobox with ExtJs. My problem is as follows:

There can be entries having html code in the displayField. Because of that during the serialization with flexjson.JSONSerializer i used the flexjson.HTMLEncoder to make the entries visible in the dropdown (before it made the screen died because of unterminated String literal). So far so good.

editor.myCombo = new Ext.form.ComboBox({
    mode: 'local',
    editable: false,
    forceSelection: true,           
    triggerAction: 'all',
    store: new Ext.data.JsonStore({
        fields: ['myId', 'myName'],
        emptyItem: {'myName' : '...'},
        data: <c:out value="${form.json['myList']}" escapeXml="false"/>         
    }),
    disabled: isEditorDisabled,
    width: 75,
    listWidth: 160,
    displayField: 'myName',
    valueField: 'myId'
});

But when i select an item from the dropdown (all displayed properly like Alfred </script>) the display field will show it as: Alfred &lt;/script&gt;.

How do i make this work? Why it is showing the encoded version (that is retrieved on the json request) and not as HTML?

Upvotes: 3

Views: 6195

Answers (1)

egerardus
egerardus

Reputation: 11486

Try including an overridden getDisplayValue method in your config. Just set it up to return the decoded value, like this:

editor.myCombo = new Ext.form.ComboBox({
    mode: 'local',
    editable: false,
    forceSelection: true,           
    triggerAction: 'all',
    store: new Ext.data.JsonStore({
        fields: ['myId', 'myName'],
        emptyItem: {'myName' : '...'},
        data: <c:out value="${form.json['myList']}" escapeXml="false"/>         
    }),
    disabled: isEditorDisabled,
    width: 75,
    listWidth: 160,
    displayField: 'myName',
    valueField: 'myId',

    // this should return the decoded string instead
    getDisplayValue: function() {
        return Ext.String.htmlDecode(this.value);
    }
});

The reason it has to be done this way is because the actual field part of the Ext.form.field.Combo really is an HTML input element and that will only display the straight text, it will not generate the HTML from it.

Upvotes: 4

Related Questions