By liran bh | 8/9/2016 | JavaScript

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 found here  

 

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);
	}
});

{{CommentsModel.TotalCount}} Comments

Your Comment

{{CommentsModel.Message}}

Recent Stories

Top DiscoverSDK Experts

User photo
3355
Ashton Torrence
Web and Windows developer
GUI | Web and 11 more
View Profile
User photo
3220
Mendy Bennett
Experienced with Ad network & Ad servers.
Mobile | Ad Networks and 1 more
View Profile
User photo
3060
Karen Fitzgerald
7 years in Cross-Platform development.
Mobile | Cross Platform Frameworks
View Profile
Show All
X

Compare Products

Select up to three two products to compare by clicking on the compare icon () of each product.

{{compareToolModel.Error}}

Now comparing:

{{product.ProductName | createSubstring:25}} X
Compare Now