Question

i’m creating an application in Ext JS 4 and i’m stuck because i need a class containing an image to use into a form or a fieldset (like a regular textfield); moreover the image will change depending on the value passed to the form.
Something like an imagefield:

Ext.define('Properties', {
        extend : 'Ext.form.Panel',
        alias : 'properties',
        bodyPadding: 5,
        // The fields
        defaultType: 'textfield',
            items: [{
            fieldLabel: 'Device Name',
            name: 'deviceName'
        },
        {
            xtype:'imagefield',
            fieldLabel: 'Status',
            name: 'status'
        }
        ],.......

I’ve tried to extend Ext.form.field.Base without any success.
Somebody can help me ?

Thank you.

Answer 1

There is Ext.Image class you can use. But you probably would need to wrap it into some kind of border and add logic to load specific image in a run-time. If you want I can post some code later today.

Update: I did something like that:

Ext.define('QP.view.base.ImageContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.baseimagecontainer',

    NO_IMAGE_FILE:  'resources/images/no_image.png',
    DOWNLOAD_URL:   '/Image/',
    UPLOAD_URL:     '/UploadImage',
    CLEAR_URL:  '/ClearImage/',

    width: 205,
    layout: 'hbox',

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'fieldset',
                itemId: 'imageWrapper',
                title: 'Image',
                width: 122,
                height: 140,
                margin: '0 0 0 0',
                layout: 'anchor',
                items: [{
                    xtype: 'image',
                    itemId: 'image',
                    maxWidth: 100,
                    maxHeight: 100
                }]
            }, {
                xtype: 'container',
                margin: '4 0 0 5',
                layout: 'anchor',
                defaults: {
                    xtype: 'button',
                    width: 70,
                    margin: '0 0 5 0'
                },
                items: [{
                    itemId: 'clearButton',
                    text: 'Clear',
                    handler: function() {
                        me.clearImage();
                    }
                }, {
                    xtype: 'fileuploadfield',
                    buttonOnly: true,
                    hideLabel: true,
                    itemId: 'uploadButton',
                    buttonText: 'Upload...',
                    buttonConfig: { width: 70 },
                    listeners: {
                        change: function(el, val) { 
                            // this.up('window').fireEvent('uploadimage', fb, v);
                            me.uploadImage(el, val);
                        }
                    }
                }, {
                    itemId: 'fullResButton',
                    text: 'Download',
                    handler: function() { 
                        window.open(me.fullImagePath);
                    }
                }]
            }]
        });

        me.callParent(arguments);
    },

    success: function() {
        var me = this,
            fs = me.down('[itemId=imageWrapper]'),
            b1 = me.down('[itemId=clearButton]'),
            b2 = me.down('[itemId=fullResButton]');

        fs.enable();
        b1.enable();
        b2.enable();
    },

    loadImage: function(recordId) {
        var me = this,
            fs = me.down('[itemId=imageWrapper]'),
            b1 = me.down('[itemId=fullResButton]'),
            b2 = me.down('[itemId=clearButton]'),
            img = me.down('image');

        me.fullImagePath = me.DOWNLOAD_URL + '/' +recordId;
        me.imageRecordId = recordId;

        fs.disable();
        b1.disable();
        b2.disable();

        img.getEl().on('load', me.success, me, { single: true });
        img.getEl().on('error', function() { 

            img.getEl().un('load', me.success, me);
            img.setSrc(me.NO_IMAGE_FILE);
            fs.enable();

        }, me, { single: true });

        img.setSrc(me.DOWNLOAD_URL + '/' +recordId);
    },

    uploadImage: function(el, val) {
        var me = this,
            fm = Ext.create('Ext.form.Panel', {
                items: [ el ]
            }),
            f = fm.getForm();

        f.submit({
            method: 'POST',
            params: {
                recordId: me.imageRecordId 
            },
            url: me.UPLOAD_URL,
            waitMsg: 'Uploading your image...',
            success: function(fp, o) {
                me.loadImage(me.imageLocation, me.imageRecordId);
            },
            failure: function(fp, o) {
                console.log('upload failed', fp, o);
            }
        });
    },

    clearImage: function() {
        var me = this;

        QP.util.Msg.askConfirmation('Are you sure you want to delete an image?', function() {
            Ext.Ajax.request({
                method: 'GET',
                url: me.CLEAR_URL + me.imageLocation + '/' + me.imageRecordId,
                success: function(fp, o) { me.loadImage(me.imageLocation, me.imageRecordId); },
                failure: function(fp, o) { console.log('upload failed', fp, o); }
            });
        }, me);
    }


});