I have a java web application. I have an entity class which (after transformation of course) i would like to use in a bobox 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 </script>.

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

I have a java web application. I have an entity class which (after transformation of course) i would like to use in a bobox 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 </script>.

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

• java
• javascript
• html
• extjs
• encoding

1 Answer 1

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.