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

我建议默认情况下在image component上有一个规则，显示一个旋转器的背景图像，然后为onload放置一个监听器，它会删除隐藏它的规则。

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

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

2 个答案: