ExtJS 4.x (4.0.7).
Panel fill all browser space, so his dimensions depend of current dimensions of browser's window.
In this panel - IMG object ('img' class, with the loaded image, id: 'certs_image').
The image need a height 90% of panel's 'client' height, width should be set automatically.

I tried to set the scale and positioning like this:

in view (Panel):
Code:
...
layout: {

type: 'vbox',
align: 'center'

},
...
in controller:
Code:
...
init: function () {
this.control({
'panel > image': {
render: this.onImgRendered
}
});
},
onImgRendered: function() {
Ext.getCmp('certs_image').setHeight('90%');
}
...
After F5 in any browsers i see like this (image is shown in top left conner):

p2.png

The IMG object positioned horizontally in the middle only if I resize browser's window.
I experimented with any panel's layout types, f/e auto, hbox, anchor, border...
But it work well if set fix panel dimension in pixels, not depend it of browser window.

Just such an example is given here: http://dev.sencha.com/deploy/ext-4.0...t-browser.html

The question is how best to position the image in the middle of the panel vertically and horizontally ?