PDA

View Full Version : Ext.Img load detection



glafrance
19 Oct 2012, 6:05 AM
I need to add an Ext.Img to a container after it is done loading, as the image is not rendered correctly.

This is the function I call to create the Ext.Img, but it doesn't work. Please help


loadImage: function (imagePath, imageContainer) {
var imgContainer = Ext.getCmp(imageContainer);
imgContainer.removeAll();
alert('outside1');
var img = Ext.create('Ext.Img', {
src: imagePath,
listeners: {
load: {
fn: function() {
alert('Loaded!');
imgContainer.add(img);
},
element: 'el'
}
}
});
}

Elfayer
19 Oct 2012, 6:27 AM
Try something like :

loadImage: function (imagePath, imageContainer) {
var img = new Ext.Img({src: imagePath});
imageContainer.insert(0, img);
});

Maybe it'll work. (I didn't test it)

scottmartin
19 Oct 2012, 7:24 AM
See if this will work:


var changingImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
renderTo: Ext.getBody(),

listeners: {
load: {
element: 'el',
fn: function () {
console.log('Finished!');
}
},
render: function () {
console.log('Loading ...');
}
}
});?


Scott.

glafrance
19 Oct 2012, 7:59 AM
Scott, when I run your code it seems the load listener is never called.

That is the key point. I need to know when the load is done.

How to know when the load is done for Ext.Img? Doesn't seem to have a load event fired.

glafrance
19 Oct 2012, 2:11 PM
Here is a sample app that shows the issue:


Ext.onReady( function (){
Ext.create('Ext.form.Panel', {
title: 'Switch Icons',
width: 250,
height: 250,
bodyPadding: 10,
renderTo: Ext.getBody(),
layout: {
type: 'vbox'
},
items: [{
xtype: 'container',
layout: {
type: 'hbox'
},
width: 240,
height: 100,
items: [{
xtype: 'container',
width: 87,
cls: 'logoContainer',
items: [{
xtype: 'image',
id: 'logoImage'
}]
}, {
xtype: 'label',
text: 'logo1.png',
padding: '0, 0, 10, 0'
}]
}, {
xtype: 'label',
text: 'Select a logo to display',
padding: '0, 0, 10, 0'
}, {
xtype: 'container',
layout: {
type: 'hbox'
},
defaults: {
xtype: 'button',
},
width: 240,
height: 30,
items: [{
text: 'Icon One',
listeners: {
click: function () {
Ext.getCmp('logoImage').setSrc('logo1.png');
}
}
}, {
text: 'Icon Two',
margin: '0, 0, 0, 5',
listeners: {
click: function () {
Ext.getCmp('logoImage').setSrc('logo2.png');
}
}
}, {
text: 'Icon Three',
margin: '0, 0, 0, 5',
listeners: {
click: function () {
Ext.getCmp('logoImage').setSrc('logo3.png');
}
}
}]
}]
});
});

glafrance
19 Oct 2012, 2:14 PM
Here are the icons to make it easier on you:

394953949639497

glafrance
19 Oct 2012, 4:59 PM
This code seems to fix it.


loadWhiteLabelImage: function (imagePath) {
var loginImageContainer = Ext.getCmp('loginImageContainer');
loginImageContainer.removeAll();
var img = Ext.create('Ext.Img', {
src: imagePath,
listeners: {
afterrender: function(){
var imgDom = this.getEl().dom;
imgDom.onload = function () {
loginImageContainer.update();
};
}
}
});
loginImageContainer.add(img);
}