Multiple containers in widgets

[William Riley]

This enhancement would allow layout widgets to be more customizable, and will enable developers to place widgets in alternative places in the widget.

To take advantage of the feature, one would replace dijit._Container with dijit._MultiContainer. _MultiContainer inherits all the properties of _Container, but adds the multiple container support.

Below is an example using markup.

<!-- modified dijit.layout.TabContainer template -->
<div class="dijitTabContainer">
	<div>
		<div dojoAttachPoint="sideContainerNode" style="float: right;"></div> <!-- if I wasn't using a pastebin, the style="..." would be in a stylesheet -->
		<div dojoAttachPoint="tablistNode"></div>
	</div>
	<div dojoAttachPoint="tablistSpacer" class="dijitTabSpacer ${baseClass}-spacer"></div>
	<div class="dijitTabPaneWrapper ${baseClass}-container" dojoAttachPoint="containerNode"></div>
</div>
<!-- possible use case -->
<div dojoType="dijit.layout.TabContainer" id="tabs">
    <div dojoType="dijit.form.Button" container="side" label="Add Tab" onClick="makeNewTab('tabs')"></div>
    <div dojoType="dijit.form.Button" container="side" label="Close All Tabs" onClick="dijit.byId('tabs').getChildren().forEach(function(w) { w.destroy(); });"></div>
    <div dojoType="dijit.layout.ContentPane" title="tab1">
        This is tab 1
    </div>
    <div dojoType="dijit.layout.ContentPane" title="tab2">
        This is tab 2
    </div>
</div>

One could use a contentPane to place raw HTML in a container.

<div dojoType="dijit.layout.TabContainer" id="tabs">
    <div dojoType="dijit.layout.ContentPane" container="side">
        Some content in the <i>side</i> container
        <div dojoType="dijit.form.Button" label="Button in 'side'"></div>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="tab1">
        This is tab 1
    </div>
    <div dojoType="dijit.layout.ContentPane" title="tab2">
        This is tab 2
    </div>
</div>

Programmatically, you would add the 'container' property to the widget.

var button = new dijit.form.Button({
     label: "foo",
     onClick: function() {
          console.log("Button clicked!");
     },
     container: "side"
});
dijit.byId("myContainer").addChild(button);

[William Riley]

I should add that if a child widget isn't given a 'container' property, it defaults to being added to containerNode.

[bill]

I don't think there's enough demand for this to create a new base class in dijit.