EXTJS 4 отображает HTML выбранного значения в выпадающем списке - PullRequest
Новая
       4

EXTJS 4 отображает HTML выбранного значения в выпадающем списке

10 голосов
/ 26 января 2012

Здравствуйте, у меня следующая проблема, я хочу отобразить HTML моего отображаемого значения в комбинированном ящике, в момент загрузки магазина с готовым 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: Извините, что не показываю изображения, а только ссылки, но у меня недостаточно репутации, чтобы показывать изображения напрямую.

Ответы [ 2 ]

15 голосов
/ 26 января 2012

Это требует нескольких шагов. Проблема в том, что 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/

0 голосов
/ 26 января 2012

У нас есть похожая задача для отображения выбранного цвета.Нашим решением является переопределение шаблона выпадающего списка: 

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,
    ...
};

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

...