Opened 13 years ago
Closed 8 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 13 years ago by
comment:2 Changed 13 years ago by
Milestone: | tbd → future |
---|
comment:3 Changed 8 years ago by
Priority: | high → low |
---|
comment:4 Changed 8 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
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.
I should add that if a child widget isn't given a 'container' property, it defaults to being added to containerNode.