I just tried it and it works. This code I knocked up works pretty well:

Ext.define('MyApp.view.Image', {
    extend: 'Ext.Img',
    alias: 'widget.image',

    config: {
        height: 1600,
        width: 2560,
        src: 'http://www.motion-creative.com/landscape-todelete.jpg',
        listeners: [
                fn: 'onImageLoad',
                event: 'load'
                fn: 'onImageError',
                event: 'error'
                fn: 'onImageInitialize',
                event: 'initialize'

    onImageLoad: function(img, e, options) {
        // Ext.Msg.alert('Ext.Img loaded successfully');

    onImageError: function(img, e, options) {
        Ext.Msg.alert('Ext.Img could not be loaded', img.getSrc());

    onImageInitialize: function(component, options) {
        Ext.Viewport.setMasked({xtype:'loadmask',message:'Loading Image...'});

I'm not sure when I use this how to add the image to a different panel.

Would I add the above as an alias in the 'requires' section of my other panel?

requires: [ 'mpapp.view.image'

...then do addCls somehow? How did you do the addCls?