ExtJS 4: ¿Imagen en el campo de formulario?

Tengo un formulario con campos como el siguiente:

items: [{
    fieldLabel: 'Name',
    name: 'name'
},{
    fieldLabel: 'Description',
    name: 'description'
},{
    xtype: 'field',
    fieldLabel: 'Icon',
    name: 'icon',
    fieldSubTpl: new Ext.XTemplate('<img src="images/icons/{value}"/>')
}]

Estoy tratando de mostrar una imagen en el formulario en función de un valor en el registro cargado. Así que si icon iguales 'test.png', entonces images/icons/test.png debe ser cargado. ¿Alguna pista sobre la mejor manera de hacer esto?

preguntado el 03 de julio de 12 a las 23:07

Mira mi respuesta a la siguiente pregunta: stackoverflow.com/questions/10932002/… -

1 Respuestas

Crearía un campo personalizado para esto, aquí hay un pequeño código de inicio, esto aún no funcionará, pero lo ubica en la dirección correcta:

Ext.define('Ext.ux.field.ImageField', {
    extend: 'Ext.form.field.Base',
    alias: 'widget.imagefield',
    fieldSubTpl: ['<img id="{id}" class="{fieldCls}" src="images/icons/{value}" />', {
        compiled: true,
        disableFormats: true
    }],

    fieldCls: Ext.baseCSSPrefix + 'form-image-field',
    value: null,


    initEvents: function () {
        this.callParent();

        //Adding the click event (can make other events here aswell)
        this.inputEl.on('click', this._click, this, {
            delegate: 'img.form-image-field'
        });

    },

    setValue: function (v) {
        var me = this;
        me.callParent(arguments);

        //Change ur image value here...
    },

    onRender: function () {
        var me = this;
        me.callParent(arguments);

        var name = me.name || Ext.id();

        me.hiddenField = me.inputEl.insertSibling({
            tag: 'input',
            type: 'hidden',
            name: name
        });

        me.setValue(me.value);
    },

    _click: function (e, o) {
        this.fireEvent('click', this, e);
    }
});

Respondido 06 Jul 12, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.