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

将代码粘贴到内部。查看读取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()
            }]

        });
    }
});

Ext.define（'DropDownList'{
扩展：“Ext.form.ComboBox”，
可编辑：false，
别名：“widget.dropdownlist”，
initComponent:function（）{
this.callParent（[arguments]）；
},
onRender:function（）{
这是callParent（）；
}
});
var states=Ext.create（'Ext.data.Store'{
字段：['abbr'，'name']，
数据：[
{
“姓名”：“阿拉巴马州”
}, 
{
“名称”：“阿拉斯加”
}, 
{
“名称”：”
}
]
});
外部应用程序({
名称：“MyApp”，
启动：函数（）{
Ext.create（'Ext.form.Panel'{
项目：[{
xtype:'dropdownlist'，
希德拉贝尔：错，
标题：“组合框测试”，
fieldLabel:“选择状态”，
商店：美国，
displayField:'名称'，
htmlEncode:对，
renderTo:Ext.getBody（）
}]
});
}
});

---

我面临的问题是，下拉列表中显示的项目被呈现为HTML。但是，在我选择它之后，它会以我想要的方式正确显示为文本（

）

下拉列表实际上是一个列表，项目文本的显示方式由其方法控制。您可以使用自定义组合的下拉列表，以便传递内部文本：

---

完整示例：

我猜这是一个真实问题的人为示例…？是的。但是如果你能解决这个问题，我可以把同样的原理应用到更大的问题上。

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