EXTJS 4 representa el HTML de un valor seleccionado en un cuadro combinado

Hola, tengo el siguiente problema, quiero renderizar el html del 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 todos, pero cuando selecciono uno, muestra el html.

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

Aquí hay algunas imágenes para ayudar a explicar el inconveniente:

Aquí es cuando voy a seleccionar uno

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

Esto es cuando selecciono uno

View post on imgur.com

El HTML que estoy renderizando es el siguiente:

hola

Gracias por adelantado.

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

Esto requiere algunos 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. P.ej:

 fieldSubTpl: [ '', '
size="{size}" ', 'tabIndex="{tabIdx}" ', 'class="{fieldCls} {typeCls}" autocomplete="off">
', '', { compiled: true, disableFormats: true } ]

Luego cambie la plantilla que muestra el valor seleccionado:

 displayTpl: Ext.create('Ext.XTemplate', [ '', '', '{[typeof values === "string" ? values : values["title"]]}', '' ]) 

Otra cosa es crear una nueva plantilla de elemento de lista. P.ej:

 listConfig: { getInnerTpl: function() { return '
' + '

{[Ext.Date.format(values.lastPost, "M j, Y")]}
by {author}
{title}

' + '{excerpt}' + '
'; } }

Y lo último: debe asegurarse de que el valor esté configurado correctamente en div. Para eso debes anular el método 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; } 

Tenga en cuenta que la nueva plantilla no contiene ningún campo de input , por lo que no se enviará el valor. Si necesita usar dicho combo con formulario, debe agregar una entrada oculta en algún lugar de fieldSubTpl y establecer un valor para él en setRawValue .

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

Tenemos una tarea similar para mostrar el color seleccionado. Nuestra solución está anulando la plantilla de combobox:

 var store = new Ext.data.SimpleStore({ fields: ['num','id', 'color'] }); var tplColor = new Ext.XTemplate( '
', '
 
', '
' ); new Ext.form.ComboBox({ tpl: tplColor, store: store, ... };

Puedes hacer algo similar pero usar imagen en lugar de color de fondo.