PDA

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 () {
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):

36317

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 ?