EXTJS 4はコンボ​​ボックスで選択された値のHTMLをレンダリングする

Question

こんにちは私は次の問題があります。私はコンボボックスで自分の表示値のhtmlをレンダリングする必要があります。 htmlのすべてを表示すると、htmlが表示されますが、選択するとhtmlが表示されます。

アイテムが既に選択されているときにhtmlをレンダリングするにはどうすればよいですか？ここで

は不便を説明するのに役立ついくつかの画像です：

Imは私が1

を選択したときにこれは1

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に正しく設定されていることを確認する必要があります。値がsubmitedされないように、新しいテンプレートは、任意のinputフィールドが含まれていません

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

お知らせ：そのためにあなたはsetRawValueメソッドをオーバーライドする必要があります。フォームでこのようなコンボを使用する必要がある場合は、fieldSubTplのどこかに隠し入力を追加し、その値をsetRawValueに設定する必要があります。

ワーキングサンプル：displayFieldはHTMLを直接受信しているので、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, 
    ... 
}; 

背景色の代わりにイメージを使用できます。