EXTJS 4 在组合框中呈现选定值的 HTML [英] EXTJS 4 render HTML of a selected value in a combobox

问题描述

你好，我有下一个问题，我想在组合框中呈现我的显示值的 html，在我加载一个准备好 html 的商店时，当我显示所有这些时它会呈现 html，但是当我选择一个，它会显示 html.

当项目已被选中时，我该怎么做才能呈现 html?

这里有一些图片可以帮助解释不便之处:

这是我要选择的时候

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 .

解决方案

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/

这篇关于EXTJS 4 在组合框中呈现选定值的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！