Event 'load' with images not fire (ST2 Beta)

[kostysh]

Need help. Event onLoad for images not fires. Look thru code please, is it wrong code or I have found a error?

Only 'load' event not fires, but 'tap', 'doubletap', 'swipe' works fine...

Ext.Loader.setConfig({enabled: true});

Ext.application({
name: 'Test',
launch: function(){
    var viewport = Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'fit'
    });

    var image = Ext.create('Ext.Img', {
        src: 'http://.......yourUrl.....png'
    });

    image.element.on({
        scope: this,
       load: function() {console.log('onLoad works!');},//Not fires!
       tap: function() {console.log('onTap works!');},
       doubletap: function() {console.log('doubletap works!');},
       swipe: function() {console.log('swipe works!');}
    });

    viewport.add(image);}
});

[mitchellsimoens]

There isn't any load event that fires on the Ext.Img component, that much I think you have discovered. Ext.Img has two modes, 'background' and other with 'background' being the default. By default, 'background' mode will apply the CSS background-image on the <div> which you won't be able to list for the image loading. But if you change the mode config on Ext.Img to anything else it will create the <img> tag:

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype  : 'image',
            mode   : 'tag',
            src    : 'https://www.google.com/intl/en_com/images/srpr/logo3w.png',
            width  : 275,
            height : 95
        }
    ]
});

However this still won't fire a load event even if you drill down to the <img> tag. So time to play with the actual Ext.Img source. First, this is something that we want correct?

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype     : 'ux-image',
            src       : 'https://www.google.com/intl/en_com/images/srpr/logo3w.png',
            width     : 275,
            height    : 95,
            listeners : {
                load : function() {
                    console.log('Image loaded!');
                }
            }
        }
    ]
});

We can do this with this little extension:

Ext.define('Ext.ux.Img', {
    extend : 'Ext.Img',
    xtype  : 'ux-image',

    config : {
        mode : 'tag'
    },

    updateSrc : function() {
        var me  = this,
            img = me.imageElement;

        img.dom.onload = Ext.Function.bind(me.onLoad, me, [img], 0);

        me.callParent(arguments);
    },

    onLoad : function(el, e) {
        this.fireEvent('load', this, el, e);
    }
});

[mitchellsimoens]

Ok... so a quick thought... how to handle errors. Here is the new Ext.ux.Img:

Ext.define('Ext.ux.Img', {
    extend : 'Ext.Img',
    xtype  : 'ux-image',

    config : {
        mode : 'tag'
    },

    updateSrc : function() {
        var me  = this,
            img = me.imageElement,
            dom = img.dom;

        dom.onload  = Ext.Function.bind(me.onLoad, me, [img], 0);
        dom.onerror = Ext.Function.bind(me.onError, me, [img], 0);

        me.callParent(arguments);
    },

    onLoad : function(el, e) {
        this.fireEvent('load', this, el, e);
    },

    onError : function(el, e) {
        this.fireEvent('exception', this, el, e);
    }
});

And of course to produce the load error:

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype     : 'ux-image',
            src       : 'https://www.google.com/intl/en_com/images/srpr/logo3wabc.png', //url is invalid
            width     : 275,
            height    : 95,
            listeners : {
                load : function() {
                    console.log('Image loaded!');
                },
                exception : function() {
                    console.warn('Image Failed!');
                }
            }
        }
    ]
});

[kostysh]

Thank you very much! Thank you very much! I think this feature must be part of ST2, very useful feature

[mitchellsimoens]

Next release you will find something

[jop_008]

Hi,

I have a carousel with pictures. The carousel is part of a panel. I can change the width and height of the picture using the mode tag.
I want the size of the pictures the same size as their placeholder. I think I must use an onload event and make use of getwidth and getheight.
Thanks for help

John

[dzheyd@gmail.com]

Hi, I exact the have the same issue here. The thing i want to do is to show some default image in Ext.Img if image load have failed. I dynamically change image using image.setSrc() method.

Solutions that you have mentioned above seems does not work with ExtJS version 4.1.2. Because there is no any "dom" and "imageElement" property of Ext.Img. And there is no any clues how to solve this in ext docs.

Please help, and thanks in advance.

[mitchellsimoens]

Solutions that you have mentioned above seems does not work with ExtJS version 4.1.2. Because there is no any "dom" and "imageElement" property of Ext.Img.

This thread is in Sencha Touch 2 forum so anything posted here may or may not work in Ext JS 4. I'd suggest creating a thread in Ext JS 4 Q&A forum.

[dzheyd@gmail.com]

Sorry, I did not know this was Sencha Touch thread. Got here by google search link.