ExtJS BoxComponent - 加载图像时显示工具提示答案

【问题标题】：ExtJS BoxComponent - show tooltip while loading an imageExtJS BoxComponent - 加载图像时显示工具提示
【发布时间】：2014-02-14 16:54:27
【问题描述】：

我的应用程序中有一个 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 中的哪些事件？或者有没有更简单的方法在图像加载时显示进度微调器？

【问题讨论】：

标签： ajax extjs dom-events extjs3

【解决方案1】：

我建议默认情况下在image component 上设置一个规则，显示微调器的背景图像，然后放置一个用于 onload 的侦听器，该侦听器将删除规则以隐藏它。

【讨论】：

【解决方案2】：

Vu Nguyen 的建议让我走上了正轨。我的 ExtJs 版本是 3.4，所以我不能使用“图像组件”。但我发现 Ext.LoadMask 组件可以很好地用作加载进度微调器。首先，我将 LoadMask 附加到 popup.el 元素。下一个技巧是捕获 BoxComponent 的 render 事件和图像的 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()

【讨论】：