Extjs динамически добавить изображение не изменяет размер панели контейнера

Question

Вот контекст: У меня есть сетка с некоторыми данными, когда я нажимаю кнопку в столбце действий, открывается окно, чтобы отобразить подробную информацию о данных. В этом окне i динамически добавляется изображение, соответствующее данным.

Проблема состоит в том, что панель, содержащая изображение, не изменить размер, чтобы соответствовать изображению в первый раз, когда я открываю окно, он отлично работает потом, когда изображение находится в кэше браузера

I пробовал использовать функции doLayout() или непосредственно после добавления изображения или в функцию обратного вызова в функции panel.show().

Я использую архитектуру MVC, так что все функции находятся в разных файлах (только для информации)

кто-нибудь может мне помочь? Я был на этом в течение нескольких дней ...

Вот некоторые примеры кода:

конструктор окна:

constructor : function(params) { 
    var rec=params.rec; 
    config = this.config; 
    config.title=rec.get('name'); 
    var mySQlId = rec.get('id'); 

    items=[ { 
     xtype:'panel', 
     autoScroll: true, 
     border: false, 
     header: false, 
     layout: { 
      type: 'vbox', 
      pack: 'start', 
      align: 'stretch', 
     }, 
     items: [{ 
      xtype:'panel', //this is where the image goes 
      border: false, 
      hidden:true, 
     }, 
     { 
      xtype: 'button', 
      enableToggle: true, 
      text: 'See 3D Structure', 
      disabled:true, 
     },{ 
      xtype:'gridMetaboliteIds', 
      mysqlid: mySQlId 
     }], 
    }]; 

    config.items = items; 

    this.callParent([config]); 

} 

код, который извлекает файл (в сценарии контроллера)

init : function() { 
    this.control({ 
     'gridMetaboliteIds':{ 
      viewready:this.getImage    
     }, 
    }); 
}, 

getImage: function(grid){ 

    var store=grid.getStore(); 

    var panel=grid.up('panel'); 
    var imgPanel=panel.down('panel'); 
    var id=imgPanel.getId(); 


    var rec=store.findRecord('dbname','inchi'); 
    var bool=true; 

    if (rec!=null){ 

     Ext.Ajax.request({ 
      url: 'sgetSVGFile.php', //This php get the name of the image coresponding to the data in a MySQL database 
      params: { 
       id: inchi 
      }, 
      success: function(response){ 
       var json = Ext.JSON.decode(response.responseText, true); 
       if (json[0]!=null){ 
        var img=Ext.create('Ext.Img', { 
         src: 'resources/images/structure_metabolite/'+json[0]["svgFile"], 
         shrinkWrap:true, 
         border:false, 

        }); 
        imgPanel.add(img); 
       } 
       else{ 
        bool=false; 
       } 
      }, 
     }) 
     imgPanel.show(null, function(){ 
      imgPanel.doLayout(); // this is not working 
     }) 


    } 

    if (!bool){ 
     this.getGif(grid); // if the svg image is not loaded do something else 
    } 
    //imgPanel.doLayout(); // this is not working either 

}, 

Answer 1

Я, наконец, сумел решить свою проблему, ошибка пришла с панели, в которой я добавлял изображение.

непосредственно добавляет изображение на первую панель (см. Ниже), а настройка макета layout: 'auto' решена этой проблемой.

items=[ { 
     xtype:'panel', 
     autoScroll: true, 
     border: false, 
     header: false, 
     layout: 'auto', 
     items: [Ext.create('Ext.Img', { 
      src: 'resources/images/structure_metabolite/'+svgFile, 

     }), 
     { 
      xtype: 'button', 
      enableToggle: true, 
      text: 'See 3D Structure', 
      disabled:true, 
      width:'100%' 
     },{ 
      xtype:'gridMetaboliteIds', 
      mysqlid: mySQlId 
     }], 
    }];