ExtJS BoxComponent - show tooltip while loading an image

Question

I have an ExtJS popup in my application. Inside the popup there is a BoxComponent with an image. The image usually takes a few seconds to load. I would like to show a "Loading..." spinner message in the box to inform the user know that something is happening.

Here is a sample of my code right now:

 function createPopup(id) {

     picUrl='/create_image.py?date='+id

     popup = new GeoExt.Popup({
         title: 'Info: ' + id,
         height: 350, 
         width:425,
         items: [pic]
     });

     pic = new Ext.BoxComponent({
         id: 'pic',
     autoEl: {tag: 'img', src: picUrl},
     border: false,
         width: 400,
         height: 300,
         listeners: { 
               //SHOULD I HANDLE MY PROGRESS SPINNER SOMEWHERE HERE???
         }
     });
     popup.show();
}

I'm a newbie to ExtJs and I couldn't figure out how to do this. I assume that I probably must create two event listeners:

The first event is when the BoxComponent (or the popup?) appears.

The second event is when the image finishes loading. In the first event, I show the progress spinner and in the second event, I hide the progress spinner.

What are the events in the Ext.BoxComponent or in the Ext.Popup that I should use? Or is there an easier way to show the progress spinner while the image is loading?

Answer 1

I suggest by default having a rule on an image component that shows a background image of spinner, and then place a listener for onload which would remove the rule to hide it.

Answer 2

The suggestion by Vu Nguyen set me on the right track. My version of ExtJs is 3.4 so I couldn't use 'image component'. But I discovered the Ext.LoadMask component that works well as a loading progress spinner. First, I attached the LoadMask to the popup.el element. The next trick was to capture the render event of the BoxComponent and the load event of the image. In the render event I show the LoadMask spinner and in the load event I hide it:

pic = new Ext.BoxComponent({
            id: 'pic',
            autoEl: {
                tag: 'img',
                src: picUrl
            },
            border: false,
            width: 400,
            height: 300,
            listeners: {
                render: function (c) {
                    var myMask = new Ext.LoadMask(popup.el, {
                        msg: "Loading station data..."
                    })
                    //show the spinner when image starts loading
                    myMask.show()
                    c.getEl().on('load', function () {
                        //hide the spinner when image finishes loading
                        myMask.hide()
                    })
                }
            }
        })

        popup = new GeoExt.Popup({
            title: 'Info: ' + stname,
            height: 350,
            width: 425,
            items: [pic]
        })
        popup.show()