Need to listen when iframe resizes

[franzisk]

I have a Layout with top (north), left (west) - menu - and right (center) panel, this right panel has the iframe where all actions are executed.

I need to listen when this iframe resizes - when the left panel collapses - because I need to resize the Dialog to fill the window width.

How can I do that?
I tried this, but no success!!! The event is never fired!!! :(


var mainIframe = top.document.getElementById('main');
element = Ext.get(mainIframe);
element.addListener("resize", function(){
//console.log(element);
console.log('iframe main resized');
});

[Animal]

You have an iframe inside your center Region?

It probably won't resize when the east Region collapses.

You'll have to add a handler to the center Region's resized event: http://extjs.com/deploy/ext-1.1-beta1/docs/output/Ext.LayoutRegion.html#event-resized

That should fire, and give you the new size.

[franzisk]

I did this change, but the events dont fire as well.


layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 30
},
west: {
split:true,
initialSize: 250,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate:true,
useShim:true,
cmargins: {top:2,bottom:2,right:2,left:2}
},
center: {
titlebar: true,
title: 'Section Content',
autoScroll:false,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false,
resizeTabs: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));

layout.add('west', new Ext.ContentPanel('classes', {title: 'Section Explorer', fitToFrame:true}));
center = layout.getRegion('center');

center.add(new Ext.ContentPanel('main', {fitToFrame:true}) );

layout.restoreState();
layout.endUpdate();

center.on("resized", function(pane, newSize){
console.log(pane);
console.log(newSize);
});
center.on("collapsed", function(layout){
console.log('collapsed');
});

[tryanDLS]

Those events will never fire for the center region - they only apply to the other regions which can be resized (N,S,E,W). Try adding a handler to resize on the west region. By the time that fires, the center region should have been adjusted, and you can then use it's measurements to resize the iframe. Also, did you try specifying the iframe height/width in percentages - this may cause it to automatically resize when the parent container is resized.