EXTJS 4 render HTML eines ausgewählten Wertes in einer Combobox

Question

Hallo, ich habe das nächste Problem, ich möchte die html meiner Anzeige Wert in einer Combobox zu machen, im Moment lade ich ein Geschäft mit der html bereit, es rendert die html, wenn ich alle von ihnen zeigen, aber wenn ich eine auswählen, es zeigen die html.

Was kann ich tun, um die HTML zu rendern, wenn das Element bereits ausgewählt ist?

Hier sind einige Bilder, um die Unannehmlichkeiten zu erklären:

Das ist der Zeitpunkt, zu dem ich eine auswählen werde

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

Dies ist der Fall, wenn ich eines auswähle

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

Das Html, das ich rendern werde, ist das nächste:

<img class="io_img" src="/files/images/io-P.gif"/><div class="io_desc">hola</div></div>

Vielen Dank im Voraus.

PD: Tut mir leid, dass ich die Bilder nicht zeige, sondern nur die Links, aber ich habe nicht genug Ansehen, um Bilder direkt zu zeigen.

Answer 1

Dies erfordert nur wenige Schritte. Das Problem ist, dass ComboBox hat ein Eingabefeld darunter, und Eingaben können kein HTML anzeigen. Der erste Schritt besteht also darin, die Vorlage zu ändern und die Eingabe durch ein div zu ersetzen. Z.B.:

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

Ändern Sie dann die Vorlage, die den ausgewählten Wert anzeigt:

displayTpl: Ext.create('Ext.XTemplate', [ 
    '<tpl for=".">',
    '<img src="http://phpbb3.pl/adm/images/icon_edit.gif" />',
    '{[typeof values === "string" ? values : values["title"]]}',
    '</tpl>'
])

Eine weitere Möglichkeit ist die Erstellung einer neuen Vorlage für Listeneinträge. Z.B.:

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

Und als Letztes müssen Sie sicherstellen, dass der Wert korrekt in div. Dafür sollten Sie überschreiben setRawValue Methode:

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

Beachten Sie, dass die neue Vorlage keine der folgenden Elemente enthält input Feld, so dass der Wert nicht übermittelt wird. Wenn Sie eine solche Kombination mit einem Formular verwenden möchten, sollten Sie eine versteckte Eingabe irgendwo in fieldSubTpl und setzen Sie den Wert für sie in setRawValue .

Arbeitsprobe: http://jsfiddle.net/lolo/8Xs5h/1/

Answer 2

Wir haben eine ähnliche Aufgabe, um die ausgewählte Farbe anzuzeigen. Unsere Lösung ist das Überschreiben der Combobox-Vorlage:

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

Sie können etwas Ähnliches tun, aber statt der Hintergrundfarbe ein Bild verwenden.