Как отобразить html как текст внутри EXTJS поле со списком

Question

Вставить код взорвать внутри Sencha fiddle. Посмотрите на элемент, который читает ProblemElement.

Ext.define('DropDownList', { 
    extend: 'Ext.form.ComboBox', 
    editable: false, 

    alias: 'widget.dropdownlist', 
    initComponent: function() { 
     this.callParent([arguments]); 
    }, 
    onRender: function() { 
     this.callParent(); 

    } 
}); 


var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [ 

     { 
      "name": "Alabama" 
     }, 
     { 
      "name": "Alaska" 
     }, 
     { 
      "name": " <input value='ProblemElement'>" 
     } 
    ] 
}); 

Ext.application({ 

    name: 'MyApp', 
    launch: function() { 


     Ext.create('Ext.form.Panel', { 

      items: [{ 
       xtype: 'dropdownlist', 
       hideLabel: false, 
       title: 'ComboBox Test', 
       fieldLabel: 'Choose State', 
       store: states, 
       displayField: 'name', 
       htmlEncode: true, 
       renderTo: Ext.getBody() 
      }] 

     }); 
    } 
}); 

Проблема, с которой я столкнулся, заключается в том, что элемент, отображаемый в раскрывающемся списке, отображается как HTML. Однако после того, как я его выберем, он корректно отображает текст (<input value='ProblemElement'>), как я его хочу.

Answer 1

Выпадающий список на самом деле является Boundlist, а способ отображения текста товара управляется его методом getInnerTpl. Вы можете настроить выпадающее меню в комбо с listConfig так, что внутренний текст передается через Ext.String.htmlEncode:

listConfig: { 
    getInnerTpl: function(displayField) { 
     return '{[Ext.String.htmlEncode(values.' + displayField + ')]}'; 
    } 
} 

Полный пример: https://fiddle.sencha.com/#fiddle/rkk