Custom Dojo Accordion Container widget with option to not expand ContentPane

Question

I am trying to create a custom dojo widget that prevents the "transistion" to the content pane. I am trying to have the pane link to another page instead of sliding.

I would specify this option using an attribute doExpand="false" example:

<div id="menu">

<div dojoType="AccordionMenu" doLayout="true" class="tundra" style="height: 300px">

<div dojoType="AccordionPane" doExpand="false" title="<p>Home</p>"></div>

<div dojoType="AccordionPane" selected="true" title="<p>Tasks 1</p>">
<ul class="nav">
     <li><a href="#">Task 1</a></li>
     <li><a href="#">Task 2</a></li>
     <li><a href="#">Task 3</a></li>
</ul>                    
</div>

<div dojoType="AccordionPane"  title="<p>Tasks 2</p>">
<ul class="nav">
     <li><a href="#">Task 1</a></li>
     <li><a href="#">Task 2</a></li>
     <li><a href="#">Task 3</a></li>
</ul>                    
</div>    

</div>

</div>

I have setup my custom widget like so:

<script>

dojo.require("dojo.parser");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuSeparator");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dijit.layout.AccordionContainer");    

dojo.ready(function(){

console.log('AccordionMenu loading');

dojo.declare("AccordionMenu",
    [dijit.layout.AccordionContainer],
    {
        postMixInProperties: function(){
        console.log('AccordionMenu postMixInProperties');
        },

        _transition: function(/*dijit._Widget?*/ newWidget, /*dijit._Widget?*/ oldWidget, /*Boolean*/ animate){
        if (newWidget.doExpand == true){
            this.inherited(arguments);
        };

        }


    });

console.log('AccordionPane loading done');

dojo.declare("AccordionPane",
    [dijit.layout.ContentPane],
    {
        doExpand: true,

        postMixInProperties: function(){
        console.log('AccordionPane postMixInProperties');
        }

    });

console.log('AccordionPane loading done');    

});    

dojo.addOnLoad( function(){
console.log('parse menu');
dojo.parser.parse("menu");
});


</script>

This somewhat works but it but when I click on a different ContentPane it doesn't collapse the previous one. There is probably a better way to do this.

Here is a live example - http://jsfiddle.net/qPqhK/15/

Abraham Farris Abraham Farris · Accepted Answer · 2012-04-30T14:06:31

Okay, I found the answer - I needed to override the selectChild method further back in dijit.layout.StackContainer. The oldWidget/newWidget vars were getting out of order in the _transition method.

selectChild: function(page){
            console.log(page);

            if (page.doExpand == true){
                console.log('true')
                this.inherited(arguments)
            };


        }

http://jsfiddle.net/KvXmR/1/

Custom Dojo Accordion Container widget with option to not expand ContentPane

1 Answers