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

问题描述

你好，我有下一个问题，我想在一个组合框中显示我的显示值的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.

当项目已经被选择时，我可以做什么来呈现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:

这是当我选择一个

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

这是当我选择一个

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

我呈现的Html是下一个：

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>

提前感谢

PD：对不起，没有显示图像，只是链接，但我没有足够的声誉直接显示图像。

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

推荐答案

这需要几步。问题是 ComboBox 在下面有输入字段，输入不能显示html。所以第一步是更改使用div替换输入的模板。例如：

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

最后一件事 - 你必须确保价值被正确设置为div。为此，您应该覆盖 setRawValue 方法：

And the last thing - you must ensure that the value is setted 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;
}

请注意，新模板不包含任何输入字段，所以值不会被提交。如果您需要使用表单组合，则应在 fieldSubTpl 中的某个地方添加隐藏输入，并在 setRawValue 中为其设置值。

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.

工作示例： http：// jsfiddle .net / lolo / 8Xs5h / 1 /

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