ExtJS 5：已加載圖像的“調整大小”面板

Question

這似乎是一件微不足道的任務，但我仍然無法完成。 我正在用ExtJS 5構建一個應用程序，並且有一個帶有圖像組件的面板。 面板必須調整大小（ shrinkWrap : true ）到圖像的原始大小。 問題在於，當布局管理器計算面板的大小時，圖像尚未完全加載，因此其大小為0,0。 我試圖添加不同的偵聽器，例如afterrender ， render ， boxready以及幾乎所有其他監聽afterrender ，但似乎沒有任何效果-圖像大小始終等於0。我還嘗試將兩個組件的大小綁定在一起請參見下面的代碼，但這也不起作用。 如果我將boxready事件配置為延遲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();
    }
});

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