Encode entries in combo dropdown

[Stefan B]

There is a discrepancy between the displayValue as it is displayed in a combo's field (after selecting it) and its representation in the DataView that is used for the dropdown box. This hits you hard when you try to display entries containing HTML tags. In the combo's field, tags are displayed as is while in the DataView they are interpreted as HTML.

To avoid this common issue I suggest to adjust the default template that's used for the DataView to add HTML encoding to the display value:

this.tpl = '<tpl for="."><div class="' + cls + '-item">{[Ext.util.Format.htmlEncode(' + this.displayField + ')]}</div></tpl>';

[jgarcia@tdg-i.com]

This is why valueField and displayField are important to use separately.

Input fields cannot display HTML in browsers. I don't think this should be changed in the browser. We *want* stylized displays in the drop down. However, we cannot have stylized data in the text field.

[jgarcia@tdg-i.com]

Here is an example i posted (http://tdg-i.com/20/custom-combobox-query-results-via-xtemplates) on my blog (http://tdg-i.com) over a year ago, where results from text typed could be covered in colored text:
http://tdg-i.com/img/screencasts/2008-02-27_1619.png

[Stefan B]

Agreed, there might be use cases for this kind of behavior.
However, your reference to valueField vs. displayField isn't valid here since we're dealing with the contents of the displayField for both cases (field and dropdown).

Maybe it would be a better option to add a renderer config option to the ComboBox. Just a thought.

[jgarcia@tdg-i.com]

Why not just strip HTML tags and be done with it? I could not imagine being a user having to modify HTML from a text field.

[Condor]

No, it's the reverse. What if one of your combobox entries contains a & sign? It will need to be htmlEncoded to display properly in the dropdown list.

ps. You can shorten your code to:
this.tpl = '<tpl for="."><div class="' + cls + '-item">{' + this.displayField + ':htmlEncode}</div></tpl>'

[Stefan B]

I can image a ton of situations where you would need to allow your users to enter unrestricted (i.e. including HTML or even fragments of tags) texts in one place and then choose from them in another.

Let's put it that way:
If you simply need to display user input "as is", the default ComboBox behavior is not suitable.

IMHO, the case you describe where the representation of a value looks different in the field and the dropdown should be configurable but should not be the default behavior. I agree though that changing this behavior would break existing code.

[jgarcia@tdg-i.com]

No, it's the reverse. What if one of your combobox entries contains a & sign? It will need to be htmlEncoded to display properly in the dropdown list.

ps. You can shorten your code to:
this.tpl = '<tpl for="."><div class="' + cls + '-item">{' + this.displayField + ':htmlEncode}</div></tpl>'

Thanks dude, this cleared it up for me. :D