Question

这似乎是一项微不足道的任务，但我仍然无法完成它。我正在使用ExtJS 5构建一个应用程序，我有一个带有图像组件的面板。面板必须将（shrinkWrap : true）的大小调整为原始图像大小。问题是，当布局管理器计算面板的大小时，图像尚未完全加载，因此它的大小为0,0。我尝试添加不同的听众，例如afterrender，render，boxready以及几乎所有其他听众，但似乎没有任何效果 - 图像大小总是等于0.我也试过了如您在下面的代码中看到的那样绑定两个组件的大小，但这也不起作用。如果我以1秒的延迟配置boxready事件，最终会计算图像大小，我可以调用updateLayout()，但这是一个非常不可靠的解决方案，因为图像是从远程服务器加载的，而我是; m无法预测服务器响应的确切时间。我知道在应用程序生命周期的某个时刻，图像被加载，我需要找到正在触发的事件，以便调整我的面板大小。

示例代码

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

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

1 个答案: