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):
layout: {
type: 'vbox',
align: 'center'
}, ...
in controller:
init: function () {
'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):


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 ?