1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Answers
    1
    Vote Rating
    1
    siebe vos is on a distinguished road

      1  

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

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


    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!

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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:

    Code:
    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.

Thread Participants: 1

Tags for this Thread