[Users] Resizing a mapPanel with a windows onresize event with IE8

[Matt Priour]

My 1st answer is: "If you are going to use ExtJS then USE it". ExtJs has layouts, calculation functions, and other features to do this. You should try to use those. See: Ext.getBody(), Ext.getDoc() which return the body or document elements as a Ext.Element. See all of the measurement functions in Ext.Element (getBox, getPositioning, getSize, getFrameWidth, etc...).
You can use the above methods outside of any Ext.Container element or inside of it, so they don't require you to use any specific layout. 
I don't know what use case you have that makes you so averse to using Viewport or even BoxComponent with a 'fit' layout. The mapPanel is a Ext.Panel and is using layout and panel configuration internally anyway.

2nd Answer: "If you're going to use plain old DOM methods, then USE them". If you want to handle the window resize and do the measurements using plain old DOM methods / properties, then you should just set the map panel size that way as well (ie Use document.getElementById('mymap').style.width = availWidth + 'px', etc...). Then call the OpenLayers.Map.updateSize() method to synchronize the map size with the map element size.

Matt Priour


From: Phil Scadden 
Sent: Monday, January 31, 2011 4:16 PM
To: users at geoext.org 
Subject: [Users] Resizing a mapPanel with a windows onresize event with IE8


mapPanel is confined to a div within existing mark-up. However, I want 
the div to resize so it fills the remaining screen. I had being using a 
windows.onResize to calculation new dimensions and set the size
(using this code).


         function pageY(elem) {
             return elem.offsetParent ? (elem.offsetTop + 
pageY(elem.offsetParent)) : elem.offsetTop;
         }
         var buffer = 10; //scroll bar buffer
         function doResize() {
             var height = window.innerHeight || 
document.body.clientHeight || document.documentElement.clientHeight;
             var width = window.innerWidth || document.body.clientwidth 
|| document.documentElement.clientWidth;
             height -= pageY(document.getElementById('AllContents'))+ 
buffer ;
         height = (height < 0) ? 0 : height;
         if (mapPanel) mapPanel.setSize(width,height);
         }

Works on all browser except IE.
On IE, the setsize calls the onresize event to be called again and this 
then repeats, shrinking the map till height is zero.

Is there a better way to do this (I DONT want to use ext viewport or 
layouts)? and what is the secret for doing this in IE?


Notice: This email and any attachments are confidential. If received in error please destroy and immediately notify us. Do not copy or disclose the contents.

_______________________________________________
Users mailing list
Users at geoext.org
http://www.geoext.org/cgi-bin/mailman/listinfo/users
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20110131/889f8644/attachment.htm