Ext-Js如何修改組合框顯示以供選擇

Question

在我的選擇模型中，項目可以是字符串，整數或html數據。 如“測試”，“ 1234”或“”。

當項目位於html中時，我的選擇模型正在呈現html，我不確定如何避免它。

謝謝您：我目前正在使用EXT JS 3.4

Answer 1

您可以創建自己的模板，並將其用於顯示下拉列表中的每個項目。

Ext.form.ComboBox組件具有tpl config屬性，您可以在其中設置模板字符串或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  
});