Skip to content

Commit 71be137

Browse files
authored
Merge pull request #8 from rad-pat/add-nodeedit-demo
Add demo showing how to edit nodes in TreeVirtual
2 parents ea50c17 + 95a55c1 commit 71be137

File tree

2 files changed

+94
-0
lines changed

2 files changed

+94
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
* Demonstrate how to edit nodes in the TreeVirtual
3+
*/
4+
qx.Class.define("qxl.demobrowser.demo.treevirtual.TreeVirtual_NodeEdit",
5+
{
6+
extend : qx.application.Standalone,
7+
8+
members :
9+
{
10+
main : function()
11+
{
12+
this.base(arguments);
13+
// We want to use some of the high-level node operation convenience
14+
// methods rather than manually digging into the TreeVirtual helper
15+
// classes. Include the mixin that provides them.
16+
qx.Class.include(qx.ui.treevirtual.TreeVirtual,
17+
qx.ui.treevirtual.MNode);
18+
19+
// Use an HBox to hold the tree and the groupbox
20+
var hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));
21+
this.getRoot().add(hBox, { edge : 30 });
22+
23+
// tree
24+
var tree = new qx.ui.treevirtual.TreeVirtual("Tree");
25+
tree.setColumnWidth(0, 400);
26+
tree.setAlwaysShowOpenCloseSymbol(true);
27+
28+
// Set the flag to allow the node editing, which is not enabled by default
29+
tree.setAllowNodeEdit(true);
30+
31+
// Add the tree
32+
hBox.add(tree);
33+
34+
// tree data model
35+
var dataModel = tree.getDataModel();
36+
37+
var te1 = dataModel.addBranch(null, "Desktop", true);
38+
39+
var te;
40+
dataModel.addBranch(te1, "Files", true);
41+
42+
te = dataModel.addBranch(te1, "Workspace", true);
43+
dataModel.addLeaf(te, "Windows (C:)");
44+
dataModel.addLeaf(te, "Documents (D:)");
45+
46+
dataModel.addBranch(te1, "Network", true);
47+
dataModel.addBranch(te1, "Trash", true);
48+
49+
var te2 = dataModel.addBranch(null, "Inbox", true);
50+
51+
te = dataModel.addBranch(te2, "Spam", false);
52+
for (var i = 1; i < 3000; i++)
53+
{
54+
dataModel.addLeaf(te, "Spam Message #" + i);
55+
}
56+
57+
dataModel.addBranch(te2, "Sent", false);
58+
dataModel.addBranch(te2, "Trash", false);
59+
dataModel.addBranch(te2, "Data", false);
60+
dataModel.addBranch(te2, "Edit", false);
61+
62+
dataModel.setData();
63+
64+
/**
65+
* Capture the dateEdited event to show a message that the node label has changed
66+
*/
67+
tree.addListener("dataEdited",
68+
/**
69+
* @lint ignoreDeprecated(alert)
70+
*/
71+
function(e)
72+
{
73+
var data = e.getData();
74+
alert(`dataEdited from ${data.oldValue.label} to ${data.value.label}`);
75+
});
76+
77+
var instructionGroup = new qx.ui.groupbox.GroupBox("Instructions");
78+
instructionGroup.setLayout(new qx.ui.layout.VBox(2));
79+
hBox.add(instructionGroup);
80+
81+
var filterLabel = new qx.ui.basic.Label("Double-click any node to begin the editing");
82+
instructionGroup.add(filterLabel);
83+
}
84+
}
85+
});
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<script type="text/javascript" src="../helper.js"></script>
6+
</head>
7+
<body>
8+
</body>
9+
</html>

0 commit comments

Comments
 (0)