如何在EXTJS组合框中将HTML显示为文本

Question

Paste the code blow inside Sencha fiddle . Look at the item that reads ProblemElement.

Ext.define('DropDownList', {
    extend: 'Ext.form.ComboBox',
    editable: false,

    alias: 'widget.dropdownlist',
    initComponent: function() {
        this.callParent([arguments]);
    },
    onRender: function() {
        this.callParent();

    }
});


var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [

        {
            "name": "Alabama"
        }, 
        {
            "name": "Alaska"
        }, 
        {
            "name": " <input value='ProblemElement'>"
        }
    ]
});

Ext.application({

    name: 'MyApp',
    launch: function() {


        Ext.create('Ext.form.Panel', {

            items: [{
                xtype: 'dropdownlist',
                hideLabel: false,
                title: 'ComboBox Test',
                fieldLabel: 'Choose State',
                store: states,
                displayField: 'name',
                htmlEncode: true,
                renderTo: Ext.getBody()
            }]

        });
    }
});

The problem I am facing is that the item displayed in the dropdown is being rendered as HTML. However after I select it it displays correctly as text ( <input value='ProblemElement'> ), the way I want it.

Answer 1

The dropdown list is actually a Boundlist , and how item text is displayed is controlled by its getInnerTpl method. You can customize the combo's dropdown with listConfig so that the inner text is passed through Ext.String.htmlEncode :

listConfig: {
    getInnerTpl: function(displayField) {
        return '{[Ext.String.htmlEncode(values.' + displayField + ')]}';
    }
}

Full example: https://fiddle.sencha.com/#fiddle/rkk