<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content=text/html;charset=iso-8859-1>
<META content="MSHTML 6.00.6002.18332" name=GENERATOR></HEAD>
<BODY id=MailContainerBody 
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-TOP: 15px" leftMargin=0 
topMargin=0 CanvasTabStop="true" name="Compose message area">
<DIV><FONT face=Arial size=2>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...).</FONT></DIV>
<DIV><FONT face=Arial size=2>You can use the above methods outside of any 
Ext.Container element or inside of it, so they don't require&nbsp;you to use any 
specific layout.&nbsp;</FONT></DIV>
<DIV><FONT face=Arial size=2>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.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT>&nbsp;</DIV>
<DIV><FONT face=Arial size=2>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.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT>&nbsp;</DIV>
<DIV><FONT face=Arial size=2>Matt Priour</FONT></DIV>
<DIV style="FONT: 10pt Tahoma">
<DIV><FONT face=Arial></FONT><FONT face=Arial></FONT><FONT 
face=Arial></FONT><FONT face=Arial></FONT><FONT face=Arial></FONT><BR></DIV>
<DIV style="BACKGROUND: #f5f5f5">
<DIV style="font-color: black"><B>From:</B> <A title=p.scadden@gns.cri.nz 
href="mailto:p.scadden@gns.cri.nz">Phil Scadden</A> </DIV>
<DIV><B>Sent:</B> Monday, January 31, 2011 4:16 PM</DIV>
<DIV><B>To:</B> <A title=users@geoext.org 
href="mailto:users@geoext.org">users@geoext.org</A> </DIV>
<DIV><B>Subject:</B> [Users] Resizing a mapPanel with a windows onresize event 
with IE8</DIV></DIV></DIV>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT 
face=Arial size=2></FONT><FONT face=Arial size=2></FONT><FONT face=Arial 
size=2></FONT><BR></DIV>mapPanel is confined to a div within existing mark-up. 
However, I want <BR>the div to resize so it fills the remaining screen. I had 
being using a <BR>windows.onResize to calculation new dimensions and set the 
size<BR>(using this 
code).<BR><BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function 
pageY(elem) 
{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
return elem.offsetParent ? (elem.offsetTop + <BR>pageY(elem.offsetParent)) : 
elem.offsetTop;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
}<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var buffer = 10; //scroll 
bar buffer<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function 
doResize() 
{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var height = window.innerHeight || <BR>document.body.clientHeight || 
document.documentElement.clientHeight;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
var width = window.innerWidth || document.body.clientwidth <BR>|| 
document.documentElement.clientWidth;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
height -= pageY(document.getElementById('AllContents'))+ <BR>buffer 
;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = (height &lt; 0) ? 
0 : height;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (mapPanel) 
mapPanel.setSize(width,height);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
}<BR><BR>Works on all browser except IE.<BR>On IE, the setsize calls the 
onresize event to be called again and this <BR>then repeats, shrinking the map 
till height is zero.<BR><BR>Is there a better way to do this (I DONT want to use 
ext viewport or <BR>layouts)? and what is the secret for doing this in 
IE?<BR><BR><BR>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.<BR><BR>_______________________________________________<BR>Users 
mailing list<BR><A href="mailto:Users@geoext.org">Users@geoext.org</A><BR><A 
href="http://www.geoext.org/cgi-bin/mailman/listinfo/users">http://www.geoext.org/cgi-bin/mailman/listinfo/users</A><BR></BODY></HTML>