In this simple example you can see how to build TreeView Control instance from several different sources of data:
In this brief example for the TreeView Control,
we begin with a
<div> containing a set of nested unordered lists
providing the basic tree structure
We create a new TreeView and render it. The TreeView will read the existing HTML and build the nodes from it.
Once we have a tree, we can read its definition, preserve it somehow and then build an identical tree from it. In the second part we are building a couple of trees, one identical to the full tree and another one from just a branch of it
tree2 we have used the full tree definition from the first tree.
tree3 we have first located a branch, for this sample, the second branch from the root
and used its definition for the tree
Finally, in the last tree, we used an object literal to define the full tree.
Here we provide as a second argument to the constructor an array where each item can be either an
object literal or a simple string, such as
which will be converted to a simple TextNode.
The items in the array can also be objects containing more detailed definitions for each node.
All require a
type property using either a short-name such as
or the object name of the node type like
'MenuNode', which will be resolved to YAHOO.widget.MenuNode.
Object definitions allow precise control over the tree since any public property of each node can be specified, for example, some nodes start expanded while others collapsed. We cannot have such expressiveness from plain HTML markup.
We have defined a couple of external links. In the first one, labeled
YAHOO, the link has the
generic style of the rest of the nodes in the tree. In the second one, labeled
YUI, we have used an HTMLNode
instead of a TextNode so TreeView copies that string into the node without adding further classNames so it gets a different look.
The last node, being a MenuNode, forces other branches to collapse when expanded. The other node with children, being a plain node doesn't mind if other nodes remain expanded.
Nodes may contain a
children property containing further node definitions.