jsn

How to add the Navigation Toolbar in the Page Content?

Discussion created by jsn on Sep 3, 2013
Latest reply on Sep 4, 2013 by jsn
Hi all,

I am trying to add the Navigation toolbar inside the "PageContent"  "dijit.layout.BorderContainer" it loses all the graphic properties.

It only works when the toolbar goes after the "<body class="soria">"


Thanks



<body class="soria">


<div id="navToolbar" data-dojo-type="dijit.Toolbar"> 
      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div> 
      <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div> 
    </div> 


    <div id="PageContent" dojotype="dijit.layout.BorderContainer" style="width: 100%;
        height: 100%;">

        
        <div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'top'">
            <div id="title">
            </div>

   

        </div>

         

        <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'center'" style="border: 2px solid #000;">
            <img id="loadingImg" alt="Loading map please wait..." src="images/loadingMapProgressBar.gif"
                style="position: absolute; right: 512px; top: 256px; z-index: 100;" />
        </div>

        <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
            data-dojo-props="region:'right',splitter:'true'">
            Right section
            <div dojotype="dijit.layout.TabContainer">
                <div dojotype="dijit.layout.ContentPane" title="Standard Style">
                    (Legend nested under layer name)
                    <div id="standardDiv">
                    </div>
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Legend">
                    <div id="legendDiv">
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'bottom'">
            <span id="dataSource"></span>
        </div>
    </div>
</body>

Outcomes