Ext-Js如何修改组合框显示以供选择

Question

在我的选择模型中，项目可以是字符串，整数或html数据。 像“测试”，“1234”或“”。

当项目是html时，我的选择模型是渲染html，我不知道如何避免它。

感谢你 PS：我目前正在使用EXT JS 3.4

Answer 1

您可以创建自己的模板，并使用它来显示下拉列表中的每个项目。

Ext.form.ComboBox组件具有tpl配置属性，您可以在其中设置模板字符串，或使用Ext.XTemplate实例显示下拉列表中的每个项目。

在此模板中，您可以使用显示值对HTML进行编码。

要在Ext JS中编码HTML，您可以使用Ext.util.Format.htmlEncode()函数。

var tpl = new Ext.XTemplate(
'<tpl for=".">',
    '<div class="x-combo-list-item">{[fm.htmlEncode(values.displayText)]}</div>',
'</tpl>'
);

var combo = new Ext.form.ComboBox({
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, '<b>item1</b>'], [2, '<i>item2<i>']]
    }),
    renderTo: Ext.getBody(),
    valueField: 'myId',
    displayField: 'displayText',
    tpl: tpl  
});