ExtJS: Display image in window - extjs

Question

Displaying image in a window sounds a simple task but i have problem with it.
I want to show my image (with variable size) to show in a window (or panel) with size 300*400. Then, by clicking on image or maximizing window, user sees image in its original size.
Following code works for stretching image to 300*400 thumbnail in initial view, but when maximizing it also stretches to full screen.
var myImage = Ext.create('Ext.Img', {
src: imgSrc,
});
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
maxWidth: myImage.getWidth(),
maxHeight: myImage.getHeight(),
layout: "fit",
items: [myImage]
})
picWin.show();

Answer 1

Take a look at my example: https://fiddle.sencha.com/#view/editor&fiddle/26eo
Seems to work. I removed the set max width and height.

Answer 2

Finally, i came to a solution like this. First we need to use card layout. Then we define two containers for specified image, one for initial view and one for maximized view. At last, we need to change these cards when window is maximized and when restored.
Code is as follows:
// Two image for when maximizing and when in initial view
var myImage = Ext.create('Ext.container.Container', {
layout: 'fit',
items: [{
xtype: 'image',
src: imgSrc
}]
});
var myImage2 = Ext.create('Ext.container.Container', {
scrollable: true,
items: [{
xtype: 'image',
src: imgSrc
}]
});
picWin = Ext.create('Ext.window.Window', {
title: "my title",
width: 300,
height: 400,
maximizable: true,
layout: "card",
activeItem: 0,
items: [myImage,myImage2],
listeners: {
maximize: function(){
this.setActiveItem(1);
},
restore: function(){
this.setActiveItem(0);
},
}
})
picWin.show();

Answer 3

What if we changed the layout from 'fit' to 'hbox' instead? This seems to give you what you want - when the window is maximised, the image does not stretch. Center and vbox also seemed to work, so there are probably a few layouts you could use to make it work. But since you only have an image in the window, it probably doesn't matter.
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
layout: "hbox",
items: [myImage]
})
picWin.show();
}