Javascript ExtJS 5:在加载的图像上调整面板大小

这似乎是一项微不足道的任务，但我仍然无法完成。 我正在用ExtJS5构建一个应用程序，我有一个面板，上面有一个图像组件。面板必须调整大小（

包覆面提取：true

）为图像的原始大小。问题是，当布局管理器计算面板的大小时，图像尚未完全加载，因此其大小为0,0。我尝试添加不同的侦听器，如

afterrender

，

render

，

boxready

，以及几乎所有其他侦听器，但对我来说似乎没有任何效果-图像大小始终等于0。我还尝试绑定这两个组件的大小，正如您将在下面的代码中看到的，但这也不起作用。如果我配置延迟1秒的

boxready

事件，图像大小最终会被计算出来，我可以调用

updateLayout（）

，但这是一个非常不可靠的解决方案，因为图像是从远程服务器加载的，我无法预测服务器响应的确切时间。我知道，在应用程序生命周期的某个时刻，映像被加载，我需要找到触发的事件，以便调整面板的大小

示例代码

Ext.application({   name   : 'MyApp',

    launch : function() {
        /* 
         * I was hoping that taking the image out of the panel 
         * will 'force' it to be created earlier.
         */
        var img = Ext.create('Ext.Img', {
            src : 'img.jpg',
            reference : 'bgimg',
            publishes : {
                width : true,
                height: true
            }
            listeners : {
                boxready : { fn : 'imgReady', scope : this, delay : 100 }
            }
        });

        Ext.create('Ext.Panel', {
            renderTo : Ext.get('extjs-content'),

            width : 1000,
            height: 700,

            defaults : {
                border : true
            },

            layout : 'border',

            items : [{
                region : 'north',
                height : 80,
            }, {
                region : 'east',
                width : 200,
                collapsible : true
            }, {
                region : 'center',
                autoScroll : true,
                items : [{
                    /*
                     * This is the container of the image. Please note that
                     * I need it to preserve its absolute layout.
                     */
                    id : 'canvas',
                    layout : 'absolute',
                    shrinkWrap : true,
//                  bind : {
//                      width : '{bgimg.width}',
//                      height: '{bgimg.height}'
//                  },
                    items : [img]
                }]
            }]
        });
    },

    /*
     * If I call this with delay of 1000ms the image size is 'ready'
     * otherwise it is 0, 0.
     */
    imgReady : function(img) {
        console.log('Image size: %o', img.getSize());
        Ext.ComponentQuery.query('#canvas')[0].updateLayout();
    }
});

---

您可以跟踪图像何时加载img元素的

load

事件

var img = Ext.create('Ext.Img', {
        src : 'img.jpg',
        reference : 'bgimg',
        publishes : {
            width : true,
            height: true
        },
        listeners : {
            load : {
               element : 'el',
               fn : 'imgReady'
            }
        }
    });

---

谢谢你的帮助。我试图监听加载事件，但没有

元素：el

部分，因此无法工作。现在我终于可以跟踪图像实际加载的时间了。祝您有个美好的一天！