PDA

View Full Version : report on panel size when viewport changes size



ext.Will
24 Aug 2009, 12:15 PM
I am trying to attach a listener on the viewport of my border layout so that I can obtain the new height and width of the center region when the user changes the size of the viewport by resizing their browser. I am just not having any luck. I'm brand new to ext and have been reading and searching for the past couple days, so i'm now having to resort to asking the experts.

So, after trying many things, here is my latest just so you can see what i'm trying to do.
Can anyone tell me how to attach the listener to the center region? The only result i've been getting is the original height of the center region everytime the browser window causes the center region to resize. So, i'm just not getting the new height, only the original height.

thanks in advance for the help.

Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout: 'border',
id: 'fullport',
items: [
{
region: 'north',
height: 50,
contentEl: 'north',
title: 'North',
margins: '0 0 2 0'
},
{
region: 'south',
contentEl: 'south',
split: true,
height: 50,
minSize: 20,
maxSize: 150,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
},
{
region: 'west',
title: 'West',
contentEl: 'west',
split: true,
width: 50,
minSize: 20,
maxSize: 400,
collapsible: true,
id: 'w-westregion',
margins: '0 0 0 0'
},
{
xtype: 'panel',
region: 'center',
margins: '0 0 0 0',
contentEl: 'centerregion',
id: 'c-centerregion',
layout: 'fit'
}
]
});

viewport.on('resize',resize);

creg = Ext.getCmp('c-centerregion');
cvp = viewport.layout.center; /* this yields the same result as creg */

ccH = creg.getSize().height;
});
function resize() {
alert("center region resized to " + ccH);
}

hendricd
24 Aug 2009, 12:19 PM
Regions are Panel's, treat them that way:



...,
{
xtype: 'panel',
region: 'center',
margins: '0 0 0 0',
contentEl: 'centerregion',
id: 'c-centerregion',
layout: 'fit',
listeners: {
resize : function(){ console.log(arguments); }
}
}


Pls, wrap you samples in [code/] tags. ;)

ext.Will
24 Aug 2009, 12:33 PM
Hey, Hendricd, very nice of you to help me out. That was exactly the info I needed..
Here is working snippet for other newbies like me:



...
contentEl: 'west',
split: true,
width: 50,
minSize: 20,
maxSize: 400,
collapsible: true,
id: 'w-westregion',
margins: '0 0 0 0'
},
{
xtype: 'panel',
region: 'center',
margins: '0 0 0 0',
contentEl: 'centerregion',
id: 'c-centerregion',
layout: 'fit',
listeners: {
resize : function(){
console.log(arguments);
resize(this.getWidth(),this.getHeight());
}
}
}
]
});
});
function resize(newWidth,newHeight) {
/* do whatever you need to do with new width and height values */
alert("New Width: " + newWidth + " and New Height: " + newHeight);
}




Regions are Panel's, treat them that way:



...,
{
xtype: 'panel',
region: 'center',
margins: '0 0 0 0',
contentEl: 'centerregion',
id: 'c-centerregion',
layout: 'fit',
listeners: {
resize : function(){ console.log(arguments); }
}
}


Pls, wrap you samples in [code/] tags. ;)