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

filter store extjs

Question

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

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

El HTML que estoy renderizando es el siguiente:

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

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.

Answer 1

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: [
    ''<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
    }
]

Luego cambie 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 una nueva plantilla de elemento de lista. P.ej:

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 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/

Answer 2

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

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