|
| 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 | +}); |
0 commit comments