ExtJS BoxComponent - show tooltip while loading an image - ajax

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()