ExtJS BoxComponent - показывать подсказку при загрузке изображения

Question

В моем приложении есть всплывающее окно ExtJS. Внутри всплывающего окна есть BoxComponent с изображением. Изображение обычно загружается за несколько секунд. Я хотел бы показать сообщение "Загрузка..." в поле, чтобы сообщить пользователю, что что-то происходит.

Вот пример моего кода прямо сейчас:

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

Я новичок в ExtJ и не могу понять, как это сделать. Я предполагаю, что мне, вероятно, нужно создать двух слушателей событий:

первое событие, когда появляется BoxComponent (или всплывающее окно?).

второе событие, когда изображение заканчивает загрузку. В первом случае я показываю счетчик прогресса, а во втором случае скрываю счетчик прогресса.

Какие события в Ext.BoxComponent или в Ext.Popup я должен использовать? Или есть более простой способ показать индикатор выполнения во время загрузки изображения?

Answer 1

По умолчанию я предлагаю иметь правило для компонента изображения, который показывает фоновое изображение счетчика, а затем разместить прослушиватель для загрузки, который удалит правило, чтобы скрыть его.

Answer 2

Предложение Ву Нгуена поставило меня на правильный путь. Моя версия ExtJs - 3.4, поэтому я не мог использовать "компонент изображения". Но я обнаружил компонент Ext.LoadMask, который хорошо работает как счетчик прогресса загрузки. Сначала я прикрепил LoadMask к popup.el элемент. Следующим трюком было запечатлеть render событие BoxComponent и load событие изображения. В событии рендера я показываю спиннер LoadMask, а в событии загрузки я его скрываю:

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