EXTJS 4 rend le HTML d'une valeur sélectionnée dans une liste déroulante

Bonjour, j'ai le problème suivant, je veux afficher le code html de mon affichage de la valeur dans une liste déroulante, pour le moment, je charge un magasin avec le code html prêt, il rend le html quand je montre tout, mais lorsque je sélectionne l'un, c'est montrer le code html.

Que puis-je faire pour afficher le code html lorsque l'élément est déjà sélectionné?

Voici quelques images pour aider à expliquer les inconvénients:

C'est quand Im va pour sélectionner un

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

C'est lorsque je sélectionne un

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

Le code Html que je suis le rendu est le suivant:

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

Merci d'avance.

PD: Désolé de pas montrer les images, et juste les liens, mais je n'ai pas assez de réputation pour afficher les images directement .

source d'informationauteur Javier Sanchez

  1. 14

    Cela nécessite quelques étapes. Le problème est que ComboBox a champ de saisie en dessous, et les intrants ne peut pas afficher du html. Donc, la première étape consiste à modifier le modèle qui remplace l'entrée de la div. Par exemple:

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

    Puis changer de modèle qui montre la valeur sélectionnée:

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

    Une autre chose est de créer une nouvelle liste-modèle d'élément. Par exemple:

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

    Et la dernière chose - vous devez vous assurer que la valeur est positionnée correctement dans div. Pour cela, vous devez remplacer setRawValue méthode:

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

    Avis que le nouveau modèle ne contient pas de input champ, la valeur ne sera pas soumis. Si vous avez besoin d'utiliser un tel combo avec le formulaire, vous devez ajouter caché entrée quelque part dans fieldSubTpl et de la valeur définie dans setRawValue.

    Échantillon de travail: http://jsfiddle.net/lolo/8Xs5h/1/

  2. 0

    Nous avons une tâche similaire à l'affichage de la couleur sélectionnée. Notre solution est primordial de zone de liste déroulante modèle: 

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

    Vous pouvez faire quelque chose de similaire, mais l'utilisation de l'image au lieu de la couleur d'arrière-plan.