PDA

View Full Version : Maximizing/resize window difference



Wolfie
13 Apr 2011, 1:51 AM
Hi all

I have more or less this structure in my layout (it's slightly more complicated but I think this example will show the point)

I am using version 3.0 in this app



var body = new Ext.BoxComponent({
//some configs and listeners
})

//body component contain div inside with some grid rendered by template

var header = new Ext.BoxComponent({
region: 'north'
//some config and listeners
})

var container = new Ext.Panel({
layout: 'border',
items: [
header,
{region: 'center', autoScroll: true, border: false, items: [body]}
],
listeners: {
resize: function(){
body.fireEvent('resize', body);
if(body.rendered)
Ext.get(header.id).setWidth(Ext.get(body.id+'-div').getWidth());
}
}

var window = new Ext.Window({
//some config here,
height: 500,
layout: 'fit',
items: [container],
listeners: {
resize: function () {
container.fireEvent('resize', container);
},
minimize: function () {
container.fireEvent('resize', container);
}
});
So now the thing is that when I am resizing window and the div inside body is higher than container/window than header is getting width the same as div inside the body (as listener in container is working correctly) but when I am maximizing or minimizing the window than the header width is not calculating according to the div inside body, but it's getting the same width as whole body container (with the scroll, and it should getting width minus scroll width). (of course I am talking about the case when the body's div is larger than window/container and the scroll appears)

Thanks for help in advance