Extjs dynamically add image doesn't resize container panel

Question

Here is the context: I've got a grid with some data, when i click on a button in an action column a window opens to display detailed information on the data. In this, window i dynamically add an image corresponding to the data.

The problem is that the panel containing the image doesn't re-size to fit image the first time I open the window, it works perfectly fine afterwards when the image is in the browser's cache

I tried using the doLayout() or updateLayout() functions directly after adding the image or within a callback function on the panel.show() function.

I'm using a MVC architecture so all the functions are in different files (just for information)

Can anyone help me? I've been on this for several days...

Here's some code samples:

the window constructor:

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]);

}

the code that retrieves the image (in the controller script)

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

I finally manage to solve my problem, the error was coming from the panel in which i was adding the image.

directly adding the image to the first panel (see below), and setting the layout to layout: 'auto' solved this issue.

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
        }],
    }];