ExtJS 4: How to auto scale an image? (no clipping)

Question

I have an Image Component in ExtJS which loads an image via URL like this:

        {
            xtype: 'image',
            width: 200,
            height: 200,
            src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
        },

The image is displayed at 100%. 200x200 px are shown and the rest is clipped. I didn't find any property to allow scaling.

What is the best way to achieve a resizing image in ExtJS?

Solution 1

You can use xtype:'image' , shrinkWrap:true

Please check with Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap

Solution 2

A bit late...but I think this is kind of what you wish to have, I happened to use the image as a scaled background behind a panel instead of an image on top inside a panel, but the theory is the same:

//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
    extend: 'Ext.container.Viewport', //my root view port
    layout: {type: 'fit'},
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                    xtype: 'container', //my background image
                    html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
                    layout: {type: 'border'},
                    items: [{
                            xtype: 'panel', //my panel on top of background
                            region: 'center',
                            bodyCls: 'transparent',
                            title: 'My Panel'
                        }]
                }]
        });
        me.callParent(arguments);
    }
});

Note that I didn't use image component, I used a container. html: <img ... and bodyCls: transparent... did the trick. You can change the image dynamically in a handler. Something like this:

//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
    backgroundImage: 'wallpaper.jpg',
    width: '100%',
    height: '100%'
}).show();