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

Question

这似乎是一项微不足道的任务，但我仍然无法完成它。 我正在使用 ExtJS 5 构建一个应用程序，并且我有一个带有图像组件的面板。面板必须将 (shrinkWrap : true) 调整为图像的原始大小。问题是当布局管理器计算面板的大小时，图像还没有完全加载，所以它的大小是 0,0。我尝试添加不同的侦听器，例如afterrender、render、boxready 以及几乎所有其他侦听器，但似乎没有任何效果 - 图像大小始终等于 0。我还尝试绑定您将在下面的代码中看到两个组件，但这也不起作用。如果我将 boxready 事件配置为延迟 1 秒，则最终计算图像大小，我可以调用 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();
    }
});

Answer 1

您可以使用 img 元素的load 事件来跟踪图像何时加载。

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