PDA

View Full Version : How to update layout when changing an image



tm8747a
24 Apr 2013, 6:31 AM
I have an Ext.window.Window component with a form in it that has a vbox layout. Inside that vbox, one of the items is an Ext.Img component. After a certain operation, I need to change the image, which I do by calling the setSrc() method. The image updates fine, but if it's bigger or smaller, the layout doesn't update. I tried calling doLayout() and updateLayout() on the window component, the form, the vbox container, none of it works. Any idea how I can get the layout to update properly?

tm8747a
24 Apr 2013, 7:46 AM
I also tried doing doComponentLayout(), doesn't work. I actually ran a test where I call doLayout(), doComponentLayout(), and updateLayout() on all the containers/components that supported each of those (including the Ext.Img component, which I didn't mention in first post) just to see if a combination would work, but even that got me no result.

slemmon
25 Apr 2013, 7:01 PM
I believe what you'll need to do is first set a load listener on the imgEl (include single: true to have this happen just the one time you load the new src) that says once the image src is loaded to the page have the parent container doLayout().

Alternatively, if you know the new source's dimensions set the height/width and then setSrc().

tm8747a
26 Apr 2013, 4:54 AM
I believe what you'll need to do is first set a load listener on the imgEl (include single: true to have this happen just the one time you load the new src) that says once the image src is loaded to the page have the parent container doLayout().

You, sir, are the very definition of a genius. Using the load listener did it. For others who may run into this, here's the exact code I used, bearing in mind that the load event is actually for the image DOM element whereas I'm setting up an image component:



this.control({
'#myImgComponent': {
render: function(img) {
img.getEl().on('load', function() {
img.ownerCt.doLayout();
});
}
}
});

slemmon
26 Apr 2013, 12:41 PM
Thanks for sharing your code/successes with others! I do like seeing that on the forums.

BTW, not a genius. Ran into the same problem myself right when the image component came out and I asked the question on the forums. ;)

rushil_186
24 May 2015, 11:28 PM
Apparently i am getting an Base64 string of an image from my server , and facing the same problem where the image is not loaded everytime with setSrc(), and if you add some random data at the end for the browser to refresh it it would show an error .how would you solve this when the you are using Base64 string in the setSRC() method???

slemmon
28 May 2015, 7:14 AM
Hi,

You might check your base64 string to make sure it's right using just a plain 'ol <img> tag. Make sure it's got the image type and such at the beginning.

nld

rushil_186
28 May 2015, 5:17 PM
sorry mate ,I think i didn't make myself clear enough but my base 64 string is correct , it is showing the images the first time i use that page but when i try to do it second time it wont show anything
i have asked a question regarding this https://www.sencha.com/forum/showthread.php?301425-Image.setSrc , i have also updated the code there .
If you could please have a look
thanks