Ext-Js如何修改用於選擇的組合框顯示

Question

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

當該項目是在HTML中，我的選擇模型是呈現HTML，我不知道如何避免它。

謝謝你 PS：我目前使用的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 
});