Operation Aborted Error

[hcervantes]

Has anyone else seen this error in IE? I have a C# ASN.NET website that uses Ext. I am using the complex, nested layout and the data grid. When I try to access the website, all the controls render, then it stops and I get the following error to pop up:
Internet Explorer cannot open the Internet site http://blablabla/webmap.aspx.
Operationaborted

When I close the message the regular error for website not found:

Internet Explorer cannot display the webpage:

Most likely causes:
You are not connected to the Internet.
The website is encountering problems.
There might be a typing error in the address.

What you can try:
Diagnose Connection Problems

I can run the app on Firefox with out any issues, and it works perfect, but IE is our client's browser of choice. Also, when I run the website in debug mode, I can step through the page load code, but when it returns the control to the client is when I get the error.
I think this has to do with javascript bug or an IE bug. Does anyone have an idea how I can tackle this issue?

Thanks in advance.

[hcervantes]

One more thing I forgot to mention is that on rare ocassions, it loads fine on IE. So I have not been able to pinpoint where the problem is. I will be deleting some of my ASP.NET control one by one to see if one of them is causing the problem.

[hcervantes]

One more thing I forgot to mention is that on rare ocassions, it loads fine on IE. So I have not been able to pinpoint where the problem is. I will be deleting some of my ASP.NET control one by one to see if one of them is causing the problem. However, I am sure it is Ext because when I remove the Ext reference, it works just fine, only that I loose all the Ext functionality.
Here is a snapshot of the error:
http://www.hcervantes.com/error/error.gif

[hcervantes]

I found this article on MS. This might be the cause of the problem, if so, Ext might need to be fixed.
http://support.microsoft.com/kb/927917/en-us

[tryanDLS]

I'll think you'll have to post some code or a link. That error indicates that you're trying to manipulate DOM elements before the document is finished loading. Have you wrapped your JS code in an Ext.onReady() block to ensure that you document is loaded before trying to access?

[brian.moeskau]

If you search, there are other posts similar to this. I'm not sure if it's your issue, as there isn't much to go on, but many times as Tim said it occurs if there's something that's altering the DOM during page load. It can also occur if you have other scripts or components that are doing something that conflicts with Ext, which almost always turns out to be the other script, not Ext, that's doing something hokey.

[hcervantes]

Thanks for the respond. I am doing it on Ext.onDocumentReady. If I comment that line so, the Layout doesn't run, it loads fine (but messy without Ext layout). Here is the code that I have:


canvas = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 109,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:false,
closeOnTab: true,
minSize: 300,
maxSize: 600
}
});

var innerCenter = new Ext.BorderLayout('innerCenter', {
north: {
split:false,
initialSize: 30,
titlebar: false
},
west: {
split:false,
initialSize: 30,
titlebar: false
},
center: {
split:false,
titlebar: false
}
});

layout.beginUpdate();
innerCenter.add('west', new Ext.ContentPanel('toolbar', 'Toolbar'));
innerCenter.add('north', new Ext.ContentPanel('h-toolbar', 'hToolbar'));
innerCenter.add('center', new Ext.ContentPanel('center1', 'Map'));
//innerCenter.add('center', new Ext.ContentPanel('divAttributeDisplay', {title: 'Attibutes', closable: false, fitToFrame:true}));
layout.add('center', new Ext.NestedLayoutPanel(innerCenter, "Map"));
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'Information', closable: true, fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('results', {title: 'Task Results', fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'Utilities', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('legend', {title: 'Legend', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('east', {title: 'Layer List', fitToFrame:true}));

// Show the default panels when two or more

layout.getRegion('west').showPanel('west');
innerCenter.getRegion('center').showPanel('center1');
layout.on("regioncollapsed", sizeMap);
layout.on("regionexpanded", sizeMap);
layout.on("regionresized", sizeMap);
layout.endUpdate();

}
};

}();

Ext.EventManager.onDocumentReady(canvas.init, canvas, true);

[tryanDLS]

This may be an issue of a form element getting moved. Have you seen these 2 threads?
http://extjs.com/forum/showthread.php?t=268

http://extjs.com/forum/showthread.php?t=1516&highlight=ASP.Net

[hcervantes]

http://extjs.com/forum/showthread.php?p=23963#post23963
I did try all of those suggestions. It still not working. I tried rendering the Layout off of the Form, put a div around the form, setting position absolute 100% w & h, and I am still having problems. In IE, the layout renders fine, but when I resize a panel, the whole view messes up. If I maxamize or restore the browser, it redraws itself fine. Only happens when I drag a panel. I still have the postback issue to test.
Does anyone have any other suggestions? I really want to make Ext work for my projects, but my boss is pressing me, so I am running out of time.

Thanks.

[hcervantes]

I am still getting this error even after rendering the borderlayout to the form and to a div around the form. I cannot put the form outside of the div becuase all the aspnet controls that I use have the runat="server" property and they MUST be within a form. Still searching for a solution.

[tryanDLS]

You might try looking at some of Rodinz's samples in the Example forum and also his site (in his sig I think). He's done a lot with .Net and Ext and dealt with these issues.

[jack.slocum]

Make sure you are also including the CSS to modify the html, body. That will help with ASP.net rendering into a div.

[hcervantes]

Thank you all for helping. Rodrigo asked me for the code so he can take a look at it, and I decided to clean it up before posting it for him. In the midst of all this, I must have removed the offending JS code because it is now working. Here is the aspx code and the javascript:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="webmap.aspx.cs" Inherits="WebMap" %>

<%@ Register Assembly="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.2.0.1324, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"
Namespace="ESRI.ArcGIS.ADF.Web.UI.WebControls" TagPrefix="esri" %>
<%@ Register Assembly="ESRI.ArcGIS.ADF.Tasks, Version=9.2.0.1324, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86" Namespace="ESRI.ArcGIS.ADF.Tasks" TagPrefix="esriTasks" %>
<%@ Register Src="Measure.ascx" TagName="Measure" TagPrefix="uc1" %>
<%@ Register Src="QueryBuilder.ascx" TagName="QueryBuilder" TagPrefix="qb" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AdGeo WebMap</title>
<link rel='stylesheet' type='text/css' href='css/ext/css/ext-all.css' />
<link rel="stylesheet" type="text/asa" href="css/ext/css/grid_example.css" />
<link rel="stylesheet" type="text/css" href="css/ext/css/ytheme-aero.css" />
<link rel="stylesheet" type="text/css" href="css/ext/css/ytheme-aero.css" />

<!-- Libs -->
<script type='text/javascript' src='ext/yui-utilities.js' ></script>
<script type='text/javascript' src='ext/ext-yui-adapter.js' ></script>
<!-- End libs -->
<script type='text/javascript' src='ext/ext-all.js' ></script>
<script type="text/javascript" src='ext/custom.js' ></script>

<style type="text/css">
#attributeGrid { border:1px solid #bbb;border-collapse:collapse; }
#attributeGrid td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
</style>

<style type='text/css'>
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
.x-layout-panel-north {
border:0px none;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
.x-layout-panel-center p {
margin:5px;
}
#props-panel .x-grid-col-0{
}
#props-panel .x-grid-col-1{
}
</style>


</head>
<body">

<form id="form1" runat="server" >

<div id ="container" >

<!-- west panel -->
<div id="west" class="x-layout-inactive-content" style="border:3; position:absolute; left:50px; top: 400px; z-index:199">
<input id="Button1" type="button" value="button" onmousedown="testFire()" />
<%-- <button id="create-grid" type="button">Create grid</button>--%>
<esri:FloatingPanel ID="Navigation_Panel" runat="server" BackColor="White" BorderColor="White"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
Style="position:relative; margin-bottom:0px; overflow: auto;" Draggable="False"
Title="Navigation" TitleBarColor="White" TitleBarHeight="20px" TitleBarSeparatorLine="True"
Transparency="0" Width="100%" HeightResizable="True" Font-Bold="True" CloseButton="False" TitleBarForeColor="DarkGray"
Expanded="False" WidthResizable="False" ShowDockButton="True" ShowDockedContextMenu="True">
<table id="Navigation_Table" cellpadding="2" cellspacing="0" style="width: 100%" ><tr>
<td align="center" valign="middle" >

</td>
<td align="center" valign="middle" >

</td>
</tr></table>
</esri:FloatingPanel>

</div>
<!-- results panel -->
<div id="results" class="x-layout-inactive-content" style="border:3">
<esri:FloatingPanel ID="Tasks_Menu_Panel" runat="server" BackColor="White" BorderColor="White"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
Height="75px" Style="position:relative; margin-bottom:0px;" Draggable="False"
Title="Tasks" TitleBarColor="White" TitleBarHeight="20px" TitleBarSeparatorLine="True"
Transparency="0" Width="100%" Font-Bold="True" CloseButton="False" TitleBarForeColor="DarkGray"
WidthResizable="False" ShowDockButton="True" ShowDockedContextMenu="True">
<asp:Menu ID="Menu1" runat="server" Style="left: 0px; position: relative;
top: 0px" Orientation="Vertical" BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="8pt" ForeColor="#7C6F57" StaticSubMenuIndent="10px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
<DynamicMenuStyle BackColor="#F7F6F3" />
<StaticSelectedStyle BackColor="#5D7B9D" />
<DynamicSelectedStyle BackColor="#5D7B9D" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
</asp:Menu>
</esri:FloatingPanel>
<esri:FloatingPanel ID="FloatingPanel1" runat="server" BackColor="White" BorderColor="White"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
Height="150px" Style="position:relative; margin-bottom:0px;" Draggable="False"
Title="Results" TitleBarColor="White" TitleBarHeight="20px" TitleBarSeparatorLine="True"
Transparency="0" Width="100%" HeightResizable="True" Font-Bold="True" CloseButton="False" TitleBarForeColor="DarkGray"
Expanded="False" WidthResizable="False" ShowDockButton="True" ShowDockedContextMenu="True">
<esri:TaskResults ID="TaskResults1" runat="server" BackColor="#ffffff" Font-Names="Verdana" Font-Size="8pt" Font-Bold="False" ForeColor="#000000" Height="200px" Style="left: 0px; width: 100%; position: absolute; top: 0px; height: 100%; overflow:auto;" Width="200px" Map="Map1" />
</esri:FloatingPanel>
</div>
<!-- North -->
<div id="north" class="x-layout-inactive-content" style="border:3">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr style="background-image:url('images/bgdStripes.gif')">
<td width="100%" height="109px">
<asp:Image ID="logo" runat="server" ImageUrl="images/logo.gif" />
</td>
</tr>
</table>
</div>

<!-- East content -->
<div id="east" class="x-layout-inactive-content" style="border:3">
<esri:Toc ID="Toc1" runat="server" Font-Bold="False" Width="100%" Height="100%" Style="left: 0px; width: 100%; position: absolute; top: 0px; height: 100%; overflow:auto;" BuddyControl="Map1" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" RenderOnDemand="True"/>
</div>

<!-- Legend -->
<div id="legend" class="x-layout-inactive-content" style="border:3">

this is legend
</div>
<!-- center layout-->
<div id="innerCenter" >
</div>
<!-- Map Display -->
<div id="center1" style="border:3; position: absolute; width: 100%; height:100%">
<div id="Map_Panel" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<esri:Map ID="Map1" runat="server" MapResourceManager="MapResourceManager1" style="" Height="450px" Width="500px">
</esri:Map>
</div>
<div style="position:absolute; top:15px; right:20px; z-index:99;font-family:Arial; font-size:tiny; color:Gray">
Copyright AdGeo 2007
</div>
</div>
<!-- tool bar--->
<div id="toolbar" style="position:absolute">
<asp:Panel runat="server" ID="LinkBar" CssClass="MapViewer_TaskbarStyle" Width="30px" Height="1000px" >

<esri:Toolbar ID="Toolbar2" runat="server" BuddyControlType="Map" Group="Toolbar1_Group" Height="350px"
ToolbarItemDefaultStyle-BackColor="Transparent" ToolbarItemDefaultStyle-Font-Names="Arial"
ToolbarItemDefaultStyle-Font-Size="Smaller" ToolbarItemDisabledStyle-BackColor="Transparent"
ToolbarItemDisabledStyle-Font-Names="Arial" ToolbarItemDisabledStyle-Font-Size="Smaller"
ToolbarItemDisabledStyle-ForeColor="Gray" ToolbarItemHoverStyle-BackColor="Transparent"
ToolbarItemHoverStyle-Font-Bold="True" ToolbarItemHoverStyle-Font-Italic="True"
ToolbarItemHoverStyle-Font-Names="Arial" ToolbarItemHoverStyle-Font-Size="Smaller"
ToolbarItemSelectedStyle-BackColor="WhiteSmoke" ToolbarItemSelectedStyle-Font-Bold="True"
ToolbarItemSelectedStyle-Font-Names="Arial" ToolbarItemSelectedStyle-Font-Size="Smaller"
ToolbarStyle="ImageOnly" WebResourceLocation="/aspnet_client/ESRI/WebADF/"
Width="30px" ToolbarItemHoverStyle-BorderColor="Black" ToolbarItemHoverStyle-BorderStyle="Solid"
ToolbarItemHoverStyle-BorderWidth="1px" ToolbarItemSelectedStyle-BorderColor="Black"
ToolbarItemSelectedStyle-BorderStyle="Solid" ToolbarItemSelectedStyle-BorderWidth="1px"
CurrentTool="MapZoomIn" Orientation="vertical" >
<ToolbarItems>
<esri:Tool ClientAction="DragRectangle" DefaultImage="~/Images/zoom-in.png" HoverImage="~/Images/zoom-in.png"
JavaScriptFile="" Name="MapZoomIn" SelectedImage="~/Images/zoom-in.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomIn" Text="Zoom In"
ToolTip="Zoom In" />
<esri:Tool ClientAction="DragRectangle" DefaultImage="~/Images/zoom-out.png" HoverImage="~/Images/zoom-out.png"
JavaScriptFile="" Name="MapZoomOut" SelectedImage="~/Images/zoom-out.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomOut" Text="Zoom Out"
ToolTip="Zoom Out" />
<esri:Tool ClientAction="DragImage" DefaultImage="~/Images/pan.png" HoverImage="~/Images/pan.png"
JavaScriptFile="" Name="MapPan" SelectedImage="~/Images/pan.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapPan" Text="Pan"
ToolTip="Pan" />
<esri:Command ClientAction="" DefaultImage="~/images/zoom-full-extent1.png" HoverImage="~/images/zoom-full-extent1.png"
JavaScriptFile="" Name="MapFullExtent" SelectedImage="~/images/zoom-full-extent1.png"
ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls" ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapFullExtent"
Text="Full Extent" ToolTip="Full Extent" />
<esri:Tool ClientAction="MapIdentify('Map1');" DefaultImage="~/Images/identify.png"
HoverImage="~/Images/identify.png" Name="MapIdentify" SelectedImage="~/Images/identify.png"
Text="Identify" ToolTip="Identify (Ctrl-MouseClick)" />
<esri:Tool ClientAction="startMeasure()" DefaultImage="~/images/measure.png" HoverImage="~/images/measure.png"
JavaScriptFile="" Name="Measure" SelectedImage="~/images/measure.png" Text="Measure"
ToolTip="Measure" />
<esri:Command ClientAction="toggleMagnifier()" DefaultImage="~/images/show-magnify.png"
JavaScriptFile="" Name="Magnifier" Text="Magnifier" />
</ToolbarItems>
<BuddyControls>
<esri:BuddyControl Name="Map1" />
</BuddyControls>
</esri:Toolbar>

</asp:Panel>
</div>
<!--horizontal toolbar-->
<div id="h-toolbar" style="position:absolute">
<asp:Panel runat="server" ID="horiztoolbar" CssClass="MapViewer_TaskbarStyle" Width="1200px" Height="30px" >
<esri:Toolbar ID="Toolbar1" runat="server" BuddyControlType="Map" Group="Toolbar1_Group" Height="28px"
ToolbarItemDefaultStyle-BackColor="Transparent" ToolbarItemDefaultStyle-Font-Names="Arial"
ToolbarItemDefaultStyle-Font-Size="Smaller" ToolbarItemDisabledStyle-BackColor="Transparent"
ToolbarItemDisabledStyle-Font-Names="Arial" ToolbarItemDisabledStyle-Font-Size="Smaller"
ToolbarItemDisabledStyle-ForeColor="Gray" ToolbarItemHoverStyle-BackColor="Transparent"
ToolbarItemHoverStyle-Font-Bold="True" ToolbarItemHoverStyle-Font-Italic="True"
ToolbarItemHoverStyle-Font-Names="Arial" ToolbarItemHoverStyle-Font-Size="Smaller"
ToolbarItemSelectedStyle-BackColor="Azure" ToolbarItemSelectedStyle-ForeColor="ControlDark"
ToolbarItemSelectedStyle-Font-Names="Arial" ToolbarItemSelectedStyle-Font-Size="Smaller"
ToolbarStyle="ImageOnly" WebResourceLocation="/aspnet_client/ESRI/WebADF/"
Width="300px" ToolbarItemHoverStyle-BorderColor="Black" ToolbarItemHoverStyle-BorderStyle="Solid" ToolbarItemHoverStyle-BorderWidth="1px" ToolbarItemSelectedStyle-BorderColor="Black" ToolbarItemSelectedStyle-BorderStyle="Solid" ToolbarItemSelectedStyle-BorderWidth="1px" CurrentTool="MapZoomIn" ToolbarItemSelectedStyle-Font-Bold="True">
<ToolbarItems>
<esri:Tool ClientAction="DragRectangle" DefaultImage="~/images/box_select.png" JavaScriptFile=""
Name="BoxSelect" ServerActionAssembly="App_Code" ServerActionClass="RectangleSelect"
Text="Select Data within a box" ToolTip="Select data from active layer within a box" />
<esri:Tool ClientAction="Polygon" DefaultImage="~/images/poly_select.png" JavaScriptFile=""
Name="PolySelect" ServerActionAssembly="App_Code" ServerActionClass="RectangleSelect"
Text="Select Data within a poly" ToolTip="Select data from active layer within a polygon" />
<esri:DropDownBox ClientAction="" DropDownListWidth="100" Items="" JavaScriptFile=""
Label="Active Layer" LabelWidth="100" Name="LayersDDB" SelectedIndex="0" ServerActionAssembly="App_Code"
ServerActionClass="SetActiveLayer" ToolTip="Spatial Query" />
<esri:Command ClientAction="showFloatingPanel('AdGeoQuery1_SecrIDQryPanel')" DefaultImage="~/images/query.PNG"
JavaScriptFile="" Name="AdGeoQueryTool" Text="AG Query Tool" ToolTip="Query Tool" />
</ToolbarItems>
<BuddyControls>
<esri:BuddyControl Name="Map1" />
</BuddyControls>
</esri:Toolbar>

</asp:Panel>
</div>
<!-- south panel -->
<div id="south" class="x-layout-inactive-content" style="border:3">
<div id="grid-panel" style="width:100%;height:150px;"></div>
<div id="divAttributeData" style="position: absolute; width: 400px; height: 150px"> </div>
</div>


<%-- Query Builder
<qb:QueryBuilder ID="QueryBuilder1" runat="server" MapBuddyId="Map1" GraphicsLayerName="GraphicsLayer"
HighlightColor="Aqua" MaxRecords=1000 PointMarkerSize=7 PointMarkerType="Star" PolyBoundaryColor="black"
PolyBoundaryTransparency=35 PolyFillType="FDiagonal" PolyTransparency=25 />
--%>
<esri:MapResourceManager ID="MapResourceManager1" runat="server" style="position: absolute; left: 10px; top: 636px;">
<ResourceItems>
<esri:MapResourceItem Definition="&lt;Definition DataSourceDefinition=&quot;In Memory&quot; DataSourceType=&quot;GraphicsLayer&quot; Identity=&quot;&quot; ResourceDefinition=&quot;&quot; DataSourceShared=&quot;True&quot; /&gt;"
DisplaySettings="visible=True:transparency=21:mime=True:imgFormat=PNG8:height=100:width=100:dpi=96:color=:transbg=False:displayInToc=False"
Name="GraphicsLayer" />
<esri:MapResourceItem Definition="&lt;Definition DataSourceDefinition=&quot;Mercury - NAVTEQ Lite&quot; DataSourceType=&quot;ArcWeb Services&quot; Identity=&quot;YMQNPMQMQMLMENUMKMWMYMPMGMPZJCIPEWPTOQIIIMPZ&quot; ResourceDefinition=&quot;&quot; DataSourceShared=&quot;True&quot; /&gt;"
DisplaySettings="visible=True:transparency=0:mime=True:imgFormat=PNG8:height=100:width=100:dpi=96:color=Black:transbg=True:displayInToc=True"
Name="Street Layers" />
<esri:MapResourceItem Definition="&lt;Definition DataSourceDefinition=&quot;grtinet&quot; DataSourceType=&quot;ArcGIS Server Local&quot; Identity=&quot;To set, right-click project and 'Add ArcGIS Identity'&quot; ResourceDefinition=&quot;(default)@mercury&quot; DataSourceShared=&quot;True&quot; /&gt;"
DisplaySettings="visible=True:transparency=0:mime=True:imgFormat=PNG8:height=100:width=100:dpi=96:color=:transbg=False:displayInToc=True"
Name="Data Layers" />
</ResourceItems>
</esri:MapResourceManager>
<esri:ScaleBar ID="ScaleBar1" runat="server" BarHeight="8" Height="30px" Map="Map1"
Style=" left: 278px; position: absolute; top: 485px; "
Width="175px" />
<esri:Magnifier ID="Magnifier1" runat="server" style="position: absolute; left: 567px; top: 304px;" Font-Names="Verdana,Sans Serif" Font-Size="8pt" MagnifierMapResource="Demo" Map="Map1" MapResourceManager="MapResourceManager1" TitleBarColor="White" Transparency="50" Visible="False" BackColor="White" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" ForeColor="Black" TitleBarForeColor="DarkGray">
</esri:Magnifier>

<uc1:Measure ID="Measure1" runat="server" AreaUnits="Sq_Miles" MapBuddyId="Map1" MapUnits="Resource_Default" MeasureUnits="Miles" NumberDecimals="3" />

<esri:TaskManager ID="TaskManager1" runat="server" BuddyControl="TaskMenu" Font-Names="Verdana"
Font-Size="8pt" ForeColor="Black" Height="17px" Style="left: 570px;
position: absolute; top: 236px" Width="204px">
&nbsp; &nbsp;&nbsp;
</esri:TaskManager>


<esri:GeocodeResourceManager ID="GeocodeResourceManager1" runat="server" style="left: 276px; position: absolute; top: 622px">
</esri:GeocodeResourceManager>
<esri:GeoprocessingResourceManager ID="GeoprocessingResourceManager1" runat="server" style="left: 283px; position: absolute; top: 689px">
</esri:GeoprocessingResourceManager>

<esri:GeocodeResourceManager ID="GeocodeResourceManager2" runat="server" style="left: 287px; position: absolute; top: 765px">
<ResourceItems>

</ResourceItems>
</esri:GeocodeResourceManager>
</div>
</form>

</body>
</html>


custom.js


canvas = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body , {
hideOnLayout: true,
north: {
split:false,
initialSize: 109,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:false,
closeOnTab: true,
minSize: 300,
maxSize: 600
}
});

var innerCenter = new Ext.BorderLayout('innerCenter', {
north: {
split:false,
initialSize: 30,
titlebar: false
},
west: {
split:false,
initialSize: 30,
titlebar: false
},
center: {
split:false,
titlebar: false
}
});

layout.beginUpdate();
innerCenter.add('west', new Ext.ContentPanel('toolbar', 'Toolbar'));
innerCenter.add('north', new Ext.ContentPanel('h-toolbar', 'hToolbar'));
innerCenter.add('center', new Ext.ContentPanel('center1', 'Map'));
//innerCenter.add('center', new Ext.ContentPanel('divAttributeDisplay', {title: 'Attibutes', closable: false, fitToFrame:true}));
layout.add('center', new Ext.NestedLayoutPanel(innerCenter, "Map"));
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'Information', closable: true, fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('results', {title: 'Task Results', fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'Utilities', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('legend', {title: 'Legend', fitToFrame:true}));
layout.add('east', new Ext.ContentPanel('east', {title: 'Layer List', fitToFrame:true}));

// Show the default panels when two or more

layout.getRegion('west').showPanel('west');
innerCenter.getRegion('center').showPanel('center1');
layout.on("regioncollapsed", sizeMap);
layout.on("regionexpanded", sizeMap);
layout.on("regionresized", sizeMap);
layout.endUpdate();

}
};

}();

Ext.EventManager.onDocumentReady(canvas.init, canvas, false);
Ext.EventManager.onDocumentReady(sizeMap);

function sizeMap()
{
var el = Ext.get("center1");
var box = el.getBox(true, false);
box.x -= 10;
box.y -= 10;
var mapPanel_el = Ext.get("Map_Panel");
mapPanel_el.setBox(box, true);
var map_el = Ext.get("Map1");
map_el.setBox(box, true);
// map.resize(box.width, box.height, true);
}


I will try to find what was breaking it and post it here. Thanks again.

[jack.slocum]

Try adding this CSS:


html, body, #container {
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
width:100%;
}

Then, change your BorderLayout constructor to point to "container":

layout = new Ext.BorderLayout('container' , {
...

[hcervantes]

I thought this issue had been resolved, but the error started showing up again. It shows up sporadically, so I continued doing some investigation. I tried many things, and I found that if you generate the layout after the form has been loaded, you avoid this issue. Add the render part of the code within the <body> near then end and directly AFTER the </FORM> tag.



</form>
<script type="text/javascript">

Ext.EventManager.onDocumentReady(canvas.init, canvas, false);
Ext.EventManager.onDocumentReady(sizeMap);
</script>
</body>
</html>


Jack, do you see any issues that this might cause? I have been testing it for a day now and it is working perfect.

Thanks.

[jack.slocum]

To be honest, I am not sure. I don't see any problems myself, but I haven't done any ASP.Net development with Ext. I am sure there are others much more knowledgeable!