Working with the ESRI JS API and Dojo
I am starting to work on a project using ArcGIS 9.3 JS API (v1.1) and am beginning to feel my way around the Dojo javascript library. The first thing that jumps out at you when using Dojo is the lack of good documentation. Even some of their demos seem to broken. After using working with ExtJS for a little while before, the Dojo documentation and its features is definitely not impressive.
I began using the Layout Container for the page layout. I wanted the bottom panel in the layout to be collapsible so that the user cam maximize their map area when the bottom panel is not being used. The Title Pane in Dojo provides the collapsible panel functionality. But the Layout Container and the Title Pane have their own dojoType that needs to be applied to the DIVs and I haven’t found any documentation on how to apply the functionality of two dojoTypes to a single DIV. This functionality was a breeze to implement in ExtJS. So, I am starting to implement that functionality on my own.
That said, I was able to get the sample for the Layout Container up and running without problems. But the trouble began when I replaced the script include for Dojo with the script include for the ESRI JS API. The Layout Container did not work as expected after.
Replacing
<script type=”text/javascript” src=http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js djConfig=”parseOnLoad: true”></script>
with
<script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1″></script>
causes the Layout Container to break. So, In included the parseOnLoad attribute with the ESRI JS script include like here
<script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1″ djConfig=”parseOnLoad: true”></script>
But didn’t solve my problem either. After a lot of head scratching and help from a colleague with trying out various permutations and combinations of things, I found that the following works.
<script type=”text/javascript”>djConfig = { parseOnLoad: true }</script>
<script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1″></script>
Subscribe
Follow Me
Contact me
Vishful thinking... 
Um, titlepane inherits from contentPane, which is what is placed inside a layoutContainer.
Think about this from a page design perspective- the idea is that you have one layoutContainer for the entire page, with several contentPanes inside of it wrapping around the actual content.
<div dojoType=”layoutContainer” >
< div dojoType=”titlePane” layoutalign=”top” >
</div >
<div id=”map” layoutalign=”left” >
<!– Map goes here –! >
< /div >
</div >
That one threw me for a loop too, until I saw this
http://forums.esri.com/Thread.asp?c=158&f=2396&t=261732&mc=2
Hey Vish,
We ran into the same issue last week.
I stronly suggest buying a copy of “Dojo the Definitive Guide” O’Reilly Press, by Matthew A. Russel.
I find the Dojo docs (book of Dojo) probably not in the format that best suits me.
This book puts everything together in a cohesive way.
In fact the very issue you have above is covered on page 21 of the book and I probably would have wasted a long time trying to figure it out if I hadn’t read this book. (although the book states that bok methods you used should have the same result, I figured I’d try both just in case).
Not only the Widget stuff but take note that the JS api does not expose all the functionality available in the REST api.
For example : Scale dependencies.
Available via REST api, not in AGS JS api.
So when you have to call the REST api directly with Dojo and deal with Hitching and xhrGet, the book is really invaluable.
Anyone been able to replace the layer toggling example with checkboxes, and throw into a dojo combo box instead? I need more samples!!!! So your experiences are invaluable. By the way, I’m not a programmer, so it takes me 5 times as long to figure this stuff out.
Matthew