[Dojo-interest] Append StackController to a regular <div>

Dustin Machi dmachi at dojotoolkit.org
Tue Dec 11 23:08:15 UTC 2007


So the main point here is that the StackController should be basically
considered only the "page" part.  You are wanting a custom controller
and will need to make one. What is being suggested is to use ScrollPane
to be the custom controller or at least the base class of a custom
controller.  A custom controller for a stack controller needs to do a
few different things.

1) If the stack controller hasn't been started up, connect to its
startup() method.  The remaining items should be done after the
startup() method has been completed on the stack controller

2) do getChildren() on the stackController to see what children it
already has.  Create button/items in the custom controller for these
already existing items.

3) the custom controller should then subscribe (either via
dojo.connect() directly to the stack container, or by using
publish/subscribe with topics) to monitor the stack controller for
additions, removal, and selection events.  Of course if you know there
will never be any additions or removals you could ignore those.

When one of these events occurs, the custom controller will need to
behave accordingly.

>> Note that doing this as markup to see if works out is a good idea,
> 
> I did. The result is reasonable. More importantly, it's better than 
> anything else I've found so far.

With real dojo widgets? I don't think the question before this one would
be the case or at least not entirely the case if we are on the same page
here.  What I mean is that you could do someting like:


<div dojoType="dojox.layout.ScrollPane" id="control"..>
	<div dojoType="dijit.form.Button"
onclick="dijit.byId('stacky').selectedChild(dijit.byId('page1'));">Page
1</div>

	<div dojoType="dijit.form.Button"
onclick="dijit.byId('stacky').selectedChild(dijit.byId('page2'));">Page
2</div>

	<div dojoType="dijit.form.Button"
onclick="dijit.byId('stacky').selectedChild(dijit.byId('page3'));">Page
3</div>

	<div dojoType="dijit.form.Button"
onclick="dijit.byId('stacky').selectedChild(dijit.byId('page4'));">Page
4</div>

</div>

<div dojoType="dojo.layout.StackContainer" id="stacky">
	<div id="page1" dojoType="dijit.layout.ContentPane"
href="page1.html"></div>

	<div id="page2" dojoType="dijit.layout.ContentPane"
href="page1.html"></div>

	<div id="page3" dojoType="dijit.layout.ContentPane"
href="page1.html"></div>

	<div id="page4" dojoType="dijit.layout.ContentPane"
href="page1.html"></div>

	...to 40 pages
</div>


If you get this to work like this, then its simply a matter of making
the ScrollPane get the initial set of pages, monitor any pages, and
update itself (highly a button or someting) as selection events occur.

Dustin



More information about the Dojo-interest mailing list