EXTJS 4 render HTML de un valor seleccionado en un cuadro combinado

Question

Hola tengo el siguiente problema, quiero renderizar el html de mi valor de visualización en un cuadro combinado, en el momento en que cargo una tienda con el html listo, muestra el html cuando los muestro a todos, pero cuando selecciono uno, muestra el html.

¿Qué puedo hacer para representar el html cuando el elemento ya está seleccionado?

Estas son algunas imágenes para ayudar a explicar el inconveniente:

Esto es cuando voy a seleccionar una

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

Esto es cuando selecciono uno

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

el código HTML que estoy haciendo es el siguiente:

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

Gracias de antemano.

PD: Lamento no mostrar las imágenes, y solo los enlaces, pero no tengo suficiente reputación para mostrar las imágenes directamente.

Answer 1

Esto requiere unos pocos pasos. El problema es que ComboBox tiene un campo de entrada debajo, y las entradas no pueden mostrar html. El primer paso es cambiar la plantilla que reemplaza la entrada con div. Por ejemplo:

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

A continuación, cambiar la plantilla que muestra el valor seleccionado:

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

Otra cosa es crear nueva plantilla de elemento de lista. Por ejemplo:

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

Y lo último: debe asegurarse de que el valor esté configurado correctamente en div. Para que usted debe anular setRawValue método:

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

en cuenta que una nueva plantilla no contiene ningún campo input, por lo que no estará sometido valor. Si necesita utilizar dicho combo con formulario, debe agregar una entrada oculta en algún lugar en fieldSubTpl y establecer el valor para él en setRawValue.

muestra de trabajo: http://jsfiddle.net/lolo/8Xs5h/1/

Answer 2

Tenemos una tarea similar para mostrar el color seleccionado. Nuestra solución es reemplazar la plantilla del cuadro combinado:

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

se puede hacer algo similar, pero en lugar de utilizar una imagen de fondo a todo color.