Opened 11 years ago

Closed 7 years ago

#7526 closed enhancement (wontfix)

Multiple containers in widgets

Reported by: William Riley Owned by:
Priority: low Milestone: future
Component: Dijit Version: 1.1.1
Keywords: dijit, container Cc:
Blocked By: Blocking:

Description

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);

Change History (4)

comment:1 Changed 11 years ago by William Riley

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

comment:2 Changed 11 years ago by bill

Milestone: tbdfuture

comment:3 Changed 7 years ago by bill

Priority: highlow

comment:4 Changed 7 years ago by bill

Resolution: wontfix
Status: newclosed

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

Note: See TracTickets for help on using tickets.