Disable html rendering in combobox dropdown list

Question

With ExtJs 3.1

My Ext.form.ComboBox is built with a store in which some values are like this : "value1", "<value2>", "value3". The problem is that "<value2>" is interpreted as a HTML tag when the combobox dropdown list is displayed. And i don't want that. Any idea?

Answer 1

Try escaping the values before binding.

Answer 2

Specify a custom template for the ComboBox list and pass the values through the HTML encoding filter:

new Ext.form.ComboBox({
    store: new Ext.data.ArrayStore({
        fields: ['field_name'],
        data: [['<item1>']]
    }),
    displayField: 'field_name',
    valueField: 'field_name',
    mode: 'local',
    tpl: '<tpl for=".">'
        +'<div class="x-combo-list-item">'
        +'{field_name:htmlEncode}'
        +'</div>'
        +'</tpl>'
});