1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,979
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default Image load

    Image load


    Any chance that 4.1's Image component might have a load event that fires when the image is loaded on the page?

    The images layout awkwardly when the size of the image isn't set in the component's config. Below is how I'm acting on the load event currently which works, but wondered if we might see a load or elementload or some such event in Image.

    Code:
    Ext.define('myimage', {
        extend: 'Ext.Img' 
        , alias: ['widget.myimage'] 
        , initComponent: function () {
            this.callParent();
            this.addEvents('imageload');
        } 
        , afterRender: function () { 
            var me = this; 
            this.callParent(arguments);
            this.mon(this.el, {
               'load' : me.onImgLoad, 
                scope : me
            });
        } 
        
        , onImgLoad: function () { 
            var me = this            , 
                ct = me.ownerCt; 
            me.fireEvent('imageload', me); 
            if (ct) { 
                ct.doLayout(); 
            } 
        }
    });

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, it's surprising that it does not have an Observable loaded event.

    However, to add listeners to elements of a Component, use the element option of the listeners config:

    Code:
    new Ext.Img({
        src: 'http://www.btinternet.com/~the_bagbournes/images/puymorens.jpg',
        listeners: {
            load: {
                fn: function() {
                    alert('Loaded!');
                },
                element: 'el'
            }
        },
        renderTo: document.body
    });

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,979
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thx for the reply.

    Would it be best if I open a feature request for the loaded event on the Image Component?

    Also, for my own edification, if I add the listener via 'el' is it now managed so that it's destroyed when the component is destroyed?

    Thx again.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Element listeners are removed when an element is removed from the DOM

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,979
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Splendid. Thx for the tip.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    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


    For what it's worth, my own experience of load events on images is that they didn't used to be reliably supported across all browsers, especially when accessing a file over the file system. I recall having to simulate it by detecting the img tag's dimensions (for an HTML img tag with no width or height set it would be 0x0 until the image was loaded, then it would auto-size). May not be relevant to your use case but it's something that might have to be considered were this to be added to the framework.

Thread Participants: 2