Ext JS 4.1 - How to render an image dynamically?

1
votes

I need to re-render an image (Ext.Image) after some events. I found doComponentLayout function but it didn't work for me unfortunately.

How can I re-render an image which is an item of form?

3
extjs4extjsextjs4.1extjs-mvc
What exactly do you mean by re-render? The layout engine does a pretty good job of keeping track of things and rendering them as of 4.1 unless something is off in your layout configurations in a parent container. Could you post some code of the offending image and a more precise description of what behavior you are wanting on re-render? Is it needing to react to changes in the size of other components or the window? Or is something else going on? - Stephen Tremaine
It's an image and there's a slider to change its brightness & contrast. Whenever slider is changed, the image should be refreshed immediately. (Image processing operations are done at backend through the brightness & contrast values that is selected by user) - talha06

3 Answers

3
votes

There is a common technique to add ? and random string at the and of image's src. Server ignores this part of src but browser thinks that you are setting new src.

var originalSrc = 'http://example.com/someimg.png';
var antiCachePart = (new Date()).getTime();
var newSrc = originalSrc + '?dc=' + antiCachePart;
// now newSrc is equal to something like "http://example.com/someimg.png?dc=1352748617627"
img.setSrc(newSrc);
2
votes

In the documentation of Ext.Img say:

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

// change the src of the image programmatically
changingImage.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');
0
votes

I haven't ever worked with Ext.Image before, but in general when we've needed to rerender an image we do one of two things: destroy and recreate the component, or put the image inside of a DataView or other template driven component and rerender the template.

doComponentLayout only applies sizing I believe, it won't regenerate the component. If you can't put the image inside of an XTemplate driven component, then destroying and recreating the component will probably be the best option.