Search code examples
javascriptimageextjsextjs4extjs4.2

extjs - How to set Ext.Img's data by a part of response?

Ext.Img provides a method named setSrc to set URL of an image. In order to prevent another call to the server when the image is a part of form data, I need to set the image through the response data.

Solution

  • As @Alexander suggested, you can call setSrc with a data URL. When the server request returned the image data encoded as base64 you can add it to the image without a server request.

    // An empty image added to the HTML body
var img = Ext.create({
    xtype: 'img',
    renderTo: Ext.getBody(),
    height: 64,
    width: 64
});

// later when you fetched the data you can add it to the image
var imgBase64EncodedData = 'data:image/png;base64,iVBORw0KG...';
img.setSrc(imgBase64EncodedData);

    See Data URIs - Mozilla Developer and the Sencha Fiddle.