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.