How to retrieve the original size and width of an Ext.Img?

[siebe vos]

To maintain the aspect ratio of an image (for instance when inside of a hbox layout using align: 'stretch'), I need the original width and height of the image that I use in the resize event.

For an Image() class this data can be accessed via the load event (after the image is loaded), but because Ext.Img is a subclass of Ext.Component obviously the 'load' event is not fired after the image is loaded. Does anyone know:

• How to maintain the aspect ration of an Ext.Img, or
• How to retrieve the width and the height of the original image (before any resizing is done), or
• How to receive the load event on the Ext.Img component

Thanks in advance!

[skirtle]

I think to get the original dimensions you'd need to make a hidden copy of the Ext.Img that doesn't have its size set:

Ext.create('Ext.Img', {
    hidden: true,
    hideMode: 'offsets',
    renderTo: Ext.getBody(),
    src: '...'
});

You can then call getWidth() and getHeight().

This still has the problem of knowing when it has loaded. You could either use polling, assuming a 0 size means it hasn't loaded yet, or try hacking in to the underlying img element. When I've implemented things like this in the past I've ended up implementing both polling and events as I found just events unreliable. Of course I wrapped both techniques behind an ExtJS event to hide the nastiness behind a nice API.