Dojo Toolkit - adding dijit inside dijit (ex. button into ContentPane in AccordionContainer)

Question

I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was similar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:

I have a script (with required items to insert button):

       require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!",  "dijit/form/Button", "dijit/_WidgetBase"],
        function(AccordionContainer, ContentPane, Button){
    var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");    
    
    var aChild1 = new  ContentPane({
        title: "Date selectors",
        content: "Test"
    });       
   
    
    var aChild2 = new  ContentPane({
        title:"Group 2",
        content:"Test"
    });


    var aChild3 = new  ContentPane({
        title:"Group 3",
        content:"Test"
    });
    
            
    aContainer.addChild(aChild1);  
    aContainer.addChild(aChild2);
    aContainer.addChild(aChild3);      
    aContainer.startup();    
    
});

And my DIV is simply:

<div id="markup" style="width: 250px; height: 300px">

This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:

var btn as new Button([...]);

and place it here:

aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);      
aContainer.startup();

but it does not work. How can I build my layout in this case? Thanks in advance for help.

score 0 · Answer 1 · edited Feb 16 '23 at 06:52

Problem solved. I applied declarative instead of programatic creation: In script, I simply added this line:

require(["dojo/parser", "dijit/layout/ContentPane"]);

Then I wrote some divs like:

<div data-dojo-type="dijit/layout/ContentPane">
    Some text
</div>

I found a tip (inside the code of demos) that:

content pane has no children so just use dojo's builtin after advice dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb) ... so all I had to do was:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
                    <!-- calendar widget pane -->
                    <input id="calendar1" data-dojo-type="dijit.Calendar">
    </div>

If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source): https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra

You will find every fragment well described. For me, it is more useful than documentation.

I hope that by solving my problem, this solution will be helpful to someone.

Dojo Toolkit - adding dijit inside dijit (ex. button into ContentPane in AccordionContainer)

1 Answers1