你好我有下一个问题,我想在一个组合框中渲染我的显示值的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>
提前致谢.
解决方法
这需要几步.问题是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中为其设置值.
