Enyo JavaScript Framework - Example

Enyo is yet another Javascript framework that is great with controls, in this example you can see how to create a tree of object

full code can be foundhere

enyo.kind({name: "enyo.sample.TreeSample",classes: "enyo-unselectable enyo-fit",kind: "FittableRows",fit: true,components: [{kind: "Selection", onSelect: "select", onDeselect: "deselect"},{kind: "Scroller", fit: true, components: [{kind: "Node", icon: "assets/folder-open.png", content: "Tree", expandable: true, expanded: true, onExpand: "nodeExpand", onNodeTap: "nodeTap", components: [{icon: "assets/file.png", content: "Alpha"},{icon: "assets/folder-open.png", content: "Bravo", expandable: true, expanded: true, components: [{icon: "assets/file.png", content: "Bravo-Alpha"},{icon: "assets/file.png", content: "Bravo-Bravo"},{icon: "assets/file.png", content: "Bravo-Charlie"}]},{icon: "assets/folder.png", content: "Charlie", expandable: true, components: [{icon: "assets/file.png", content: "Charlie-Alpha"},{icon: "assets/file.png", content: "Charlie-Bravo"},{icon: "assets/file.png", content: "Charlie-Charlie"}]},{icon: "assets/folder-open.png", content: "Delta", expandable: true, expanded: true, components: [{icon: "assets/file.png", content: "Delta-Alpha"},{icon: "assets/file.png", content: "Delta-Bravo"},{icon: "assets/file.png", content: "Delta-Charlie"}]},{icon: "assets/file.png", content: "Epsilon"}]}]}],nodeExpand: function(inSender, inEvent) {inSender.setIcon("assets/" + (inSender.expanded ? "folder-open.png" : "folder.png"));},nodeTap: function(inSender, inEvent) {var node = inEvent.originator;this.$.selection.select(node.id, node);},select: function(inSender, inEvent) {inEvent.data.$.caption.applyStyle("background-color", "lightblue");},deselect: function(inSender, inEvent) {inEvent.data.$.caption.applyStyle("background-color", null);}});