Programmatically add child to dojox/mobile/ScrollablePane

Question

How do I programmatically add a child to dojox/mobile/ScrollablePane? The reference guide only has a declarative example - http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ScrollablePane.html.

ScrollablePane Doesn't seem to have an addChild method. I tried using placeAt on the child widget and passed in the containerNode of the ScrollablePane. That doesn't work either.

The following declarative code works. I'm not able to do it programmatically. Specifically, I cant figure out how to add RoundRectList under the ScrollablePane.

<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props='label:"Title", fixed:"top"'>
        <span data-dojo-type="dojox/mobile/ToolBarButton"
                data-dojo-props='icon:"mblDomButtonWhiteSearch"'></span>
        <span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton"
                  data-dojo-props="label: 'Exit'"
                  style="float:right;"></span>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollablePane" style="position: relative; overflow: hidden;" >
    <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Menu</h2>
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 1", moveTo:"#", transition:"slide", onClick:openScreen' />
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 2", moveTo:"#", transition:"slide", onClick:openScreen' />
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 3", moveTo:"#", transition:"slide", onClick:openScreen' />
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 4", moveTo:"#", transition:"slide", onClick:openScreen' />
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 5", moveTo:"#", transition:"slide", onClick:openScreen' />
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 6", moveTo:"#", transition:"slide", onClick:openScreen' />
    </ul>
    </div>
</div>

Answer 1

can you try something like

this.ScrollablePane.domNode.appendChild(RoundRectList.domNode);

before this, you need to construct RoundRectList

Answer 2

Yeah , seems dojox exp missed implementation of this last , so you can workaround this issue by using the place methode of dojo/dom-construct module , so after creating you element , just place it's domNode inside the scrollpane's containers node as below code . (here I just affect the id="scrollpane" to the ScrollablePane and get it's reference using dijit/registry module )

var rectList = new RoundRectList();
domConstruct.place(rectList.domNode,registry.byId("scrollpane").containerNode, 'last');

you can see a sample Fiddle here