Geek Answers Handbook

Unable to create dijits via dojo.NodeList.instantiate

I am trying to get dijits for rendering using the dojo.NodeList.instantiate method, which accepts existing HTML elements and turns them into dijits when the DOM boots.

The API reference for the instantiate method can be found here .

The following example, which calls the instantiate method in the dojo.addOnLoad method, should create a BorderContainer with two instances of ContentPane , but the ContentPane remain as they start and do not become dijits:

 <!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> <title>Dijit Test</title> <style type="text/css"> @import "dojoroot/dijit/themes/tundra/tundra.css"; @import "dojoroot/dojo/resources/dojo.css"; </style> <script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad( function() { dojo.query("#divOuter").instantiate( dijit.layout.BorderContainer, { design : 'sidebar', gutters : false } ); dojo.query("#divMiddle").instantiate( dijit.layout.ContentPane, { region : 'center' } ); dojo.query("#divRight").instantiate( dijit.layout.ContentPane, { region : 'right', splitter : true } ); } ); </script> </head> <body> <div id="divOuter" style="width:400px;height:300px"> <div id="divMiddle">Middle box</div> <div id="divRight">Right box</div> </div> </body> </html>

I tried the above code in both Firefox 3.5 and Internet Explorer 7, and both could not display the digits. If I specify a standard HTML attribute in a property object (for example, the style attribute), this style change displays correctly, indicating that the object is being read:

 // The red border appears when using this example dojo.query("#divRight").instantiate( dijit.layout.ContentPane, { region : 'right', splitter : true, style : 'border:1px solid red' } );

The following HTML (using dojoType and other property attributes) works fine - BorderContainer and ContentPanes render correctly in both browsers:

 <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:400px;height:300px"> <div dojoType="dijit.layout.ContentPane" region="center">Middle box</div> <div dojoType="dijit.layout.ContentPane" region="right" splitter="true" style="width:200px;">Right box</div> </div>

Please tell me why the instantiate example does not work?

I searched many times, but cannot find anyone else with this problem, which may mean that I am not using the instantiate method correctly!

Thanks.

+4
source share
1 answer

You need to trigger a launch on these digits after they are created. dojo.query.instantiate does not do this for you, since it just creates objects.

At the bottom of your onLoad function, add the following:

  dijit.byId('divOuter').startup(); dijit.byId('divMiddle').startup(); dijit.byId('divRight').startup();
+2
source

More articles:


All Articles