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

问题描述

Hello我有下一个问题，我想在组合框中渲染我的显示值的html，当我加载一个存储与html准备好，它呈现html当我显示所有的，但是当我选择一个，它显示html。

当项目已经选择时，我可以做什么来渲染html？

以下是一些有助于解释不便之处的图片：

这是Im要选择一个

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

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

我正在渲染的Html是下一个：

 < img class =io_imgsrc =/ files / images /io-P.gif\"/> ;<div class =io_desc> hola< / div>< / div>提前感谢。
 
 
 
 PD：
 



<

解决方案

对不起，没有显示图片，只有链接，但我没有足够的声誉直接显示图片。这需要几个步骤。问题是 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} -triggerWrapclass ={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 ）{
 var me = this; 
 value = Ext.value（value，''）; 
 me.rawValue = value; 
 
 //一些字段子类不能渲染inputEl 
 if（me.inputEl）{
 // me.inputEl.dom.value = value; 
 // use innerHTML 
 me.inputEl.dom.innerHTML = value; 
} 
返回值; 
} 
  

请注意，新模板不包含任何输入字段，因此不会转义值。如果你需要在表单中使用这样的组合，你应该在 fieldSubTpl 中的某处添加隐藏输入，并在 setRawValue 。

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

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

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屋！