EXTJS 4 render HTML of a selected value in a combobox

Question

Hello I have the next problem, I want to render the html of my display value in a combobox, at the moment I load a store with the html ready, it renders the html when I show all of them, but when I select one, it show the html.

What can I do to render the html when the item is already selected?

Here are some images to help to explain the inconvenient:

This is when Im going to select one

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

This is when I select one

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

The Html that I'm rendering is the next one:

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

Thanks in advance.

PD: Sorry to no show the images, and just the links, but I don't have enough reputation to show images directly .

Krzysztof · Accepted Answer · 2021-11-30T08:42:40.600

This require few steps. Problem is that ComboBox has input field underneath, and inputs can't display html. So first step is to change template which replace input with div. Eg:

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
    }
]

Then change template which shows selected value:

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

Another thing is to create new list-item template. Eg:

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>';
    }
}

And the last thing - you must ensure that the value is set correctly into div. For that you should override setRawValue method:

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

Notice that new template doesn't contain any input field, so value will not be submited. If you need use such combo with form, you should add hidden input somewhere in fieldSubTpl and set value for it in setRawValue.

Working sample: http://jsfiddle.net/lolo/8Xs5h/1/

OMG!, its quite a lot of stuff to do, I just want to ask you how can I manage the html I get from the server, because the displayField is receiving an html directly, not a text, then if you can guide me what's the better approach in this case. thanks. — Javier Sanchez, Jan 26 '12 at 12:13
in IE extjs is unable to register "click" event to the fieldSubTpl. addEventListener is undefined — Stevanicus, Mar 07 '13 at 10:02
Fix: remove the triggerwrap -> '
', '{triggerEl}', '
', '
', Also works in IE & Firefox then — Stevanicus, Mar 07 '13 at 10:39
@Krzysztof have you checkd it with extJs6? I tried to but it's not worked as I thought it would — DanilGholtsman, Jan 26 '16 at 16:33
@Krzysztof tried yesterday but maybe I do smth wrong or now it interpretate `displayTpl` different way http://stackoverflow.com/questions/34946014/combobox-showing-html-as-text — DanilGholtsman, Jan 27 '16 at 05:18
@Krzysztof great example of doing things the right way. Trying to do this as a multi-select. Will post back, but if you know please update your answer. Thx — Paul Allsopp, Nov 27 '21 at 23:08

score 0 · Answer 2 · answered Jan 26 '12 at 11:11

We have similar task to display selected color. Our solution is overriding of combobox template:

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

You can do something similar but use image instead of background-color.

EXTJS 4 render HTML of a selected value in a combobox

2 Answers2

Linked