unmask when the background of a container is loaded.

Hi,

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

Code:

---

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.Viewport.setMasked(false);
        // 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?

:-)