Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#3916 closed defect (worksforme)

SplitContainers render incorrectly when instantiated after load

Reported by: guest Owned by: Adam Peller
Priority: high Milestone: 1.2
Component: Dijit Version: 0.9
Keywords: Cc:
Blocked By: Blocking:

Description

With parseOnLoad set to false and a manual call to dojo.parser.parse() after the necessary requires, the SplitContainer? widget renders incorrectly. On a split with two panes and a single sizer, it renders three panes and two sizers. This behavior exists at least in IE6 and FF2 on Windows XP. Below is the code for a minimal test case. If parseOnLoad is set to true and the normal dojo.require calls are used, the SplitContainer? renders correctly. However, other widgets tested (TabContainer?, Tree, Dialog, and a few others) render correctly using both methods. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="/dojo_0.9/dojo/dojo.js" djConfig="parseOnLoad:false, isDebug:true"></script>
		<script type="text/javascript">
			/*
			dojo.require( "dijit.layout.SplitContainer" );
			dojo.require( "dijit.layout.ContentPane" );
			dojo.require( "dojo.parser" );
			*/

			var _req = [
				"dijit.layout.SplitContainer",
				"dijit.layout.ContentPane",
				"dojo.parser"
			];

			dojo.addOnLoad(
				function()
				{
					dojo.forEach( _req, function( r ) { dojo.require( r ) } );
					dojo.parser.parse();
				}
			);
		</script>
		<link rel="stylesheet" type="text/css" href="/dojo_0.9/dojo/resources/dojo.css" />
		<link rel="stylesheet" type="text/css" href="/dojo_0.9/dijit/themes/tundra/tundra.css" />
		<style type="text/css">
			html, body
			{
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body class="tundra">
		<div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7" activeSizing="false" style="height:100%;width:100%;">
			<div dojoType="dijit.layout.ContentPane" sizeShare="50" sizeMin="50">
				Pane 1
			</div>
			<div dojoType="dijit.layout.ContentPane" sizeShare="50" sizeMin="50">
				Pane 2
			</div>
		</div>
	</body>
</html>

Change History (8)

comment:1 Changed 12 years ago by bill

Milestone: → 2.0
Owner: changed from bill to James Burke

First a few things

  • calling dojo.require() and expecting to be synchronous is a little dangerous. works for XHR but not for other transports
  • this code is too verbose: 
    dojo.forEach( _req, function( r ) { dojo.require( r ) } );

it can simply be 

dojo.forEach(_req, dojo.require);

But, the biggest issue here is that you are calling dojo.require() from within a dojo.addOnLoad(), which is messing things up somehow. The function you defined is getting called twice, thus parse() is getting called twice, and things go south from there.

So there's arguably a bug here but it hardly seems worth fixing. I'll pass to James for consideration.

comment:2 Changed 12 years ago by James Burke

I think #2765 is causing part of the problem. As a work-around until that is fixed, add a setTimeout inside the addOnLoad call to see if that fixes it: 

dojo.addOnLoad(function(){
    setTimeout(function(){
        dojo.forEach(_req, dojo.require);
        dojo.parser.parse();
    }, 100);
});

comment:3 Changed 12 years ago by bill

Owner: changed from James Burke to Adam Peller

comment:4 Changed 12 years ago by Adam Peller

Keywords: bordercontainer added

comment:5 Changed 12 years ago by Adam Peller

Keywords: bordercontainer removed

comment:6 Changed 12 years ago by Adam Peller

Resolution: → worksforme
Status: new → closed

comment:7 Changed 12 years ago by alex

Milestone: 2.0 → 1.3

Milestone 2.0 deleted

comment:8 Changed 12 years ago by bill

Milestone: 1.3 → 1.2
Note: See TracTickets for help on using tickets.