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

我是ExtJs的新手，我不知道该怎么做。我假设我可能必须创建两个事件侦听器：

第一个事件是BoxComponent（或弹出窗口？）出现的时间。

第二个事件是图像加载完成时。在第一个事件中，我显示进度条，在第二个事件中，我隐藏进度条。

我应该使用Ext.BoxComponent或Ext.Popup中的事件是什么？还是在加载图像时显示进度条的简单方法？

Answer 1

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