PDA

View Full Version : Examples on how to make a tree from <ul> (unordered list) markup?



ScottyDelicious
22 Sep 2007, 1:43 PM
I am simply blown away by the Ext.BorderLayout()

I want to use this to document some of the PHP programs that I have written (for MODx CMS/F (http://modxcms.com)).
I have a BorderLayout set up with nested unordered lists in the 'west' region. I would like to make a tree out of that. The markup in the west looks like this:


<div id="nav">
<ul id="public-methods">
<li><a href="public-method1.html">Public Method 1</a></li>
<li><a href="public-method2.html">Public Method 2</a></li>
<li><a href="public-method3.html">Public Method 3</a></li>
</ul>
<ul id="private-methods">
<li><a href="private-method1.html">Private Method 1</a></li>
<li><a href="private-method2.html">Private Method 2</a></li>
<li><a href="private-method3.html">Private Method 3</a></li>
</ul>
<ul id="usage-examples">
<li><a href="usage-simple.html">Simple</a></li>
<li><a href="usage-complex.html">Complex</a></li>
<li><a href="usage-ridiculous.html">Ridiculous Setup</a></li>
</ul>
</div>


Please advise. Any suggestions or links are greatly appreciated.

Thank you for your time and code!

evant
22 Sep 2007, 4:06 PM
You pretty much have to do it by hand, something like this:



var tree = //do tree creation
var root = //do root creation
tree.setRootNode(root);

Ext.select('#nav ul').each(function(ul)
{
var node = //create node from ul
root.appendChild(node);
ul.select('li').each(function(li)
{
var child = //create node from li
node.appendChild(child);
}
);
}
);

ScottyDelicious
22 Sep 2007, 6:33 PM
Ok, that sounds pretty straight forward!
Thanks for the tip Evant :)