View Full Version : Place & scaling IMG object into middle of panel...

Allan Stark
18 Jun 2012, 4:04 AM
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() {

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.0/examples/layout-browser/layout-browser.html

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