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

jgwigjjp  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(176)

你好,我有下一个问题,我想呈现我的显示值的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:很抱歉没有显示图片,只是链接,但我没有足够的声誉直接显示图片。

dxpyg8gm

dxpyg8gm1#

这需要几个步骤。问题是ComboBox下面有输入字段,输入不能显示html。所以第一步是改变模板,用div替换input。例如:

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

请注意,新模板不包含任何input字段,因此不会提交该值如果需要在表单中使用此类组合框,则应在fieldSubTpl中某处添加隐藏输入,并在setRawValue中为其设置值
工作样品:http://jsfiddle.net/lolo/8Xs5h/1/

m3eecexj

m3eecexj2#

我们有类似的任务来显示选定的颜色。我们的解决方案是覆盖组合框模板:

var store = new Ext.data.SimpleStore({
    fields: ['num','id', 'color']
});

var tplColor = new Ext.XTemplate(
    '<tpl for="."><div id = "seriesColor_{num}" class="combo-result-item">',
       '<div  class="combo-texture" style="background-color:{color};">&nbsp;</div>',
    '</div></tpl>'
 );

new Ext.form.ComboBox({
    tpl: tplColor,
    store: store,
    ...
};

你可以做一些类似的事情,但使用图像而不是背景色。

相关问题