Load event on an image element

[EdPS]

I have the following html in a container, and I want add listeners to the load event of the images, because they are dynamically changed during runtime.

html: [
		'<div id="img-xtr">',
			'<img id="img1"></img>',
			'<img id="img2"></img>',
		'</div>'	
		].join(''),

I have tried to use Ext.get(id) to get the elements and then add the listeners with the 'on' method. However the Ext.Element doesn't seem to have a 'load' event and the event is never triggered.

How could I listen to the load event?

Thanks

[mitchellsimoens]

Ext.Img has a load method if you can use that as an item. Otherwise the <img> has a load event that you can listen to, here is an example:

new Ext.Container({
    fullscreen : true,
    html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
    listeners  : {
        painted : function(comp) {
            var el  = comp.element,
                img = el.down('img');

            img.dom.addEventListener('load', function() {
                console.log('load');
            });
        }
    }
});

[EdPS]

Thanks Mitchell. Actually I tried using the Ext.Img and the load event works, but it seems that Ext.Img requires to specify the size of the image in the config parameter because otherwise it won't display the image, and I don't know the size in advance. I don't know what is the expected behavior but the dimensions parameters don't behave in the same way as in the <img> element.

[mihaipocorschi]

@mitchellsimoens ...your code works only on the first img. Using .query() return html objects not ext.element. Clues?

[mihaipocorschi]

i tried

el.select('img').each(function(el,c){
    Ext.get(el.dom).addListener('load', function()
            {
                console.log('loaded');
            })
        });

it doesnt work. it works for other events like tap/mouseover etc. Maybe it's not load?

[mitchellsimoens]

Instead of this:

new Ext.Container({
    fullscreen : true,
    html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
    listeners  : {
        painted : function(comp) {
            var el  = comp.element,
                img = el.down('img');

            img.dom.addEventListener('load', function() {
                console.log('load');
            });
        }
    }
});

I would do:

new Ext.Container({
    fullscreen : true,
    html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
    listeners  : {
        element : 'element',
        delegate : 'img',
        load : function() {
            //
        }
    }
});