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

Вы можете отслеживать, когда изображение загружается с load случае элемента IMG.

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