EXTJS 4 отображает HTML из выбранного значения в combobox

Здравствуйте, у меня есть следующая проблема: я хочу отобразить html моего отображаемого значения в combobox, в тот момент, когда я загружаю хранилище с готовым html, он отображает html, когда я показываю все из них, но когда я выберите один, он отобразит html.

Что я могу сделать, чтобы отобразить html, когда элемент уже выбран?

Вот некоторые изображения, которые помогут объяснить неудобство:

Это когда я собираюсь выбрать один

http://i.stack.imgur.com/TcfRA.jpg

Это когда я выбираю

http://i.stack.imgur.com/Kzi9r.jpg

Html, который я показываю, следующий:

<img class="io_img" src="/files/images/io-P.gif"/><div class="io_desc">hola</div></div>

Спасибо заранее.

PD: Извините, что не показывайте изображения и просто ссылки, но у меня недостаточно репутации, чтобы показывать изображения напрямую.

Ответ 1

Для этого требуется несколько шагов. Проблема в том, что ComboBox имеет поле ввода внизу, а входы не могут отображать html. Итак, первым шагом является изменение шаблона, который заменяет ввод на div. Например:

fieldSubTpl: [
    '<div class="{hiddenDataCls}" role="presentation"></div>',
    '<div id="{id}" type="{type}" ',
        '<tpl if="size">size="{size}" </tpl>',
        '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
        'class="{fieldCls} {typeCls}" autocomplete="off"></div>',
    '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
        '{triggerEl}',
        '<div class="{clearCls}" role="presentation"></div>',
    '</div>',
    {
        compiled: true,
        disableFormats: true
    }
]

Затем измените шаблон, который отображает выбранное значение:

displayTpl: Ext.create('Ext.XTemplate', [ 
    '<tpl for=".">',
    '<img src="http://phpbb3.pl/adm/images/icon_edit.gif" />',
    '{[typeof values === "string" ? values : values["title"]]}',
    '</tpl>'
])

Другое дело - создать новый шаблон списка. Например:

listConfig: {
    getInnerTpl: function() {
        return '<div class="search-item">' +
            '<h3><img src="http://phpbb3.pl/adm/images/icon_edit.gif" /><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
            '{excerpt}' +
        '</div>';
    }
}

И последнее: вы должны убедиться, что значение правильно установлено в div. Для этого вы должны переопределить метод setRawValue:

setRawValue: function(value) {
    var me = this;
    value = Ext.value(value, '');
    me.rawValue = value;

    // Some Field subclasses may not render an inputEl
    if (me.inputEl) {
        // me.inputEl.dom.value = value;
        // use innerHTML
        me.inputEl.dom.innerHTML = value;
    }
    return value;
}

Обратите внимание, что новый шаблон не содержит поля input, поэтому значение не будет отправлено. Если вам нужна комбинация с формой, вы должны добавить скрытый ввод где-нибудь в fieldSubTpl и установить для него значение в setRawValue.

Рабочий пример: http://jsfiddle.net/lolo/8Xs5h/1/

Ответ 2

Аналогичная задача для отображения выбранного цвета. Наше решение переопределяет шаблон combobox:

var store = new Ext.data.SimpleStore({
    fields: ['num','id', 'color']
});

var tplColor = new Ext.XTemplate(
    '<tpl for="."><div id = "seriesColor_{num}" class="combo-result-item">',
       '<div  class="combo-texture" style="background-color:{color};">&nbsp;</div>',
    '</div></tpl>'
 );

new Ext.form.ComboBox({
    tpl: tplColor,
    store: store,
    ...
};

Вы можете сделать что-то подобное, но использовать изображение вместо фона.