javascript - 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  
});