EXTJS 4在組合框中呈現所選值的HTML

Question

你好，我有下一個問題，我想在一個組合框中渲染我的顯示值的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：很抱歉沒有顯示圖片，只顯示鏈接，但我沒有足夠的聲譽來直接顯示圖片。

Answer 1

這需要很少的步驟。 問題是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;
}

請注意，新模板不包含任何input字段，因此不會提交值。 如果你需要使用這樣的組合與形式，你應該添加在什么地方隱藏的輸入fieldSubTpl並設置值它setRawValue 。

工作樣本： http ： //jsfiddle.net/lolo/8Xs5h/1/

Answer 2

我們有類似的任務來顯示所選的顏色。 我們的解決方案是覆蓋組合框模板：

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

你可以做類似的事情，但使用圖像而不是背景顏色。