Ext JS Dynamic Image Refresh and Load

If you are having image refresh issues with the xtype:’image’ in your container or panel take a look at the code below.

The important piece of this code it to tell the Image component to reload when the afterrender event is dispatched. Within your afterrender block, you want to simply call me.doComponentLayout() on your image component. That will force a refresh and render the image.

items : [{
    xtype : 'image',
    src : '',
    listeners : {
	afterrender :  function(me){
		me.el.on({
	            load: function (evt, ele, opts) {
       			me.doComponentLayout();
	            },
	            error: function (evt, ele, opts) {
			
	            }
	        });
	}
    }
}],