Ext-Js, как изменить отображение панели комбо для выбора

Question

В моих выборках могут быть строки, целые или html-данные. Как «Тестирование», «1234» или «».

Когда элемент находится в html, моя модель выбора - это рендеринг html, я не уверен, как его избежать.

Спасибо вам PS: Я в настоящее время использую Ext JS 3.4

Answer 1

Вы можете создать свой собственный шаблон и использовать его для отображения каждого элемента в списке.

Ext.form.ComboBox У компонента есть tpl конфигурационное свойство, где вы можете установить строку шаблона или экземпляр Ext.XTemplate для отображения каждого элемента в раскрывающемся списке.

В этом шаблоне вы можете кодировать HTML в отображаемых значениях.

Для кодирования HTML в Ext JS вы можете использовать функцию 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 
});