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?
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.