dojo contentpane- how to keep it closed by default

StackOverflow https://stackoverflow.com/questions/10437308

  •  05-06-2021
  •  | 
  •  

Question

I have set up a layout that contains a few dojo widgets and would like the side menu which has contentpanes to all be closed by default. What happens is that the first one stays open and causes the other contentpanes to disappear. By the way the contentpanes are all within a accordiancontainer

<!doctype html>
<html lang="en" dir="ltr">
<head>
   <script src=
     "https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
      djConfig="parseOnLoad: true"></script>


    <title>Dijit Template</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/
      libs/dojo/1.5/dijit/themes/claro/claro.css" />
    </head>
    <body class="claro">
    <div style="width: 535px; height: 290px">
    <div dojoType="dijit.layout.BorderContainer" style="width: 100%; 
     height: 100%;">
    <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
        This is the content in the top section.
    </div>
    <div dojoType="dijit.layout.ContentPane" region="left" style="width: 100px;" 
      splitter="true">
        <div dojoType="dijit.layout.AccordionContainer"minSize="20" 
         style="width:  300px;" id="leftAccordion" region="leading" splitter="true">
         <div dojoType="dijit.layout.ContentPane" title="HOME">
          </div>
         <div dojoType="dijit.layout.ContentPane" title="INSTANCES">
          <div dojoType="dijit.TitlePane" title="Reader01">
                    </div>
       </div>
      <div dojoType="dijit.layout.ContentPane" title="DISCOVERY">
                  </div>
     </div><!-- end AccordionContainer -->
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
        This is the content in the center section.
    </div>
    <div dojoType="dijit.layout.ContentPane" region="right" 
            style="width: 100px;"splitter="true">
        This is the content in the right section.
    </div>
    <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
         This is the content in the bottom section.
     </div>
 </div>
  </div>




</body>
</html>​
Was it helpful?

Solution

in the addChild functio of AccorionContainer you will see following lines

this.layout();
if(!this.selectedChildWidget){
   this.selectChild(child);
}

a child will allways be selected, however lets draw a line here

Try this, it is snippet of your code, adding an empty child ontop of all the other contentpanes (home, instances etc), which we will set selected - and hide onload

        <div dojoType="dijit.layout.AccordionContainer"  
         style="width:  300px;" id="leftAccordion" region="leading" splitter="true">
            <script type="dojo/connect" events="onLoad">
                // at this point, children have not yet been added, release and let widget complete workflow
                var acc_container = this;
                setTimeout(function() {
                   // get the child, then hack to get its wrapper (includes titlenode)
                   var hiddenChild = acc_container.getChildren()[0].id+"_wrapper"
                   hiddenChild = dijit.byId(hiddenChild);
                   acc_container._hideChild(hiddenChild);
               }, 100);
            </script>

         <div dojoType="dijit.layout.ContentPane" dojoProps="selected:true" selected="true">
          </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top