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