Question

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

        });
    }
});

我面临的问题是下拉列表中显示的项目呈现为HTML。但是，在我选择它之后，它正确显示为文本（<input value='ProblemElement'>），就像我想要的那样。

Answer 1

下拉列表实际上是Boundlist，项目文本的显示方式由其getInnerTpl方法控制。您可以使用listConfig自定义组合的下拉菜单，以便内部文字通过Ext.String.htmlEncode传递：

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

完整示例：https://fiddle.sencha.com/#fiddle/rkk

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

1 个答案: