EXTJS 4在组合框中呈现选定值的HTML

发布时间：2020-12-14 18:57:40 所属栏目：资源来源：网络整理

导读：你好我有下一个问题,我想在一个组合框中渲染我的显示值的html,当我加载一个html的商店的时候,它呈现出html,当我显示所有的,但是当我选择一个,它显示html. 当项目已经被选择时,我可以做什么来渲染html？这里有一些图片可以帮助您解释不方便：这是当我选择一

你好我有下一个问题,我想在一个组合框中渲染我的显示值的html,当我加载一个html的商店的时候,它呈现出html,当我显示所有的,但是当我选择一个,它显示html.

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

这里有一些图片可以帮助您解释不方便：

这是当我选择一个

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

这是当我选择一个

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

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

<img class="io_img" src="/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}-triggerWrap" class="{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(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中为其设置值.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!