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

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

This is when I select one

http://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 .

Solution

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/

Comments

[Javier Sanchez]

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.

[Stevanicus]

in IE extjs is unable to register "click" event to the fieldSubTpl. addEventListener is undefined

[Stevanicus]

Fix: remove the triggerwrap -> '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">', '{triggerEl}', '<div class="{clearCls}" role="presentation"></div>', '</div>', Also works in IE & Firefox then

[DeLe]

@ferchotipin How you did with dynamic html from server?

[DanilGholtsman]

@Krzysztof have you checkd it with extJs6? I tried to but it's not worked as I thought it would

[DanilGholtsman]

@Krzysztof tried yesterday but maybe I do smth wrong or now it interpretate displayTpl different way stackoverflow.com/questions/34946014/…

[Paul Allsopp]

@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