title: ExtJS BoxComponent - show tooltip while loading an image
body: <p>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.</p>
  
  <p>Here is a sample of my code right now:</p>
  
  <pre><code> 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();
  }
  </code></pre>
  
  <p>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:</p>
  
  <p>The first event is when the BoxComponent (or the popup?) appears. </p>
  
  <p>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.</p>
  
  <p>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?</p>