CODEWITHSUNDEEP
extjs4extjsextjs4.1extjs-mvc
talha06
talha06

Reputation: 6466

Ext JS 4.1 - How to render an image dynamically?

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?

Upvotes: 1

Views: 8726

Answers (3)

Molecular Man
Molecular Man

Reputation: 22386

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);

Upvotes: 3

chepike
chepike

Reputation: 59

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');

Upvotes: 2

Telgin
Telgin

Reputation: 1604

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.

Upvotes: 0

Related Questions