diff options
Diffstat (limited to 'swat/apps/qooxdoo-examples/example/TreeFullControl_2.html')
| -rw-r--r-- | swat/apps/qooxdoo-examples/example/TreeFullControl_2.html | 270 |
1 files changed, 270 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/example/TreeFullControl_2.html b/swat/apps/qooxdoo-examples/example/TreeFullControl_2.html new file mode 100644 index 0000000000..18c7cdafa4 --- /dev/null +++ b/swat/apps/qooxdoo-examples/example/TreeFullControl_2.html @@ -0,0 +1,270 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> +<p>Shows a tree, with user-defined extra fields. In this example, the extra +fields include a left-justified icon, a checkbox between the node icon and the +label, and a whole series of right-justified fields. Additionally, the root node may be hidden. </p> + </div> + + <script type="text/javascript"> + var treeRowStructure; + + function stuff(vLabel, vIcon, vIconSelected) + { + treeRowStructure = qx.ui.treefullcontrol.TreeRowStructure.getInstance().newRow(); + + // A left-justified icon + if (Math.floor(Math.random() * 4) == 0) + { + obj = new qx.ui.basic.Image("icon/16/alarm.png", 16); + } + else + { + obj = new qx.ui.basic.Image(null, 16); + } + treeRowStructure.addObject(obj, true); + + // Here's our indentation and tree-lines + treeRowStructure.addIndent(); + + // The standard tree icon follows + treeRowStructure.addIcon( + arguments.length >= 2 ? vIcon : "icon/16/desktop.png", + arguments.length >= 3 ? vIconSelected : "icon/16/dictionary.png"); + + // A checkbox comes right after the tree icon + obj = new qx.ui.form.CheckBox( + null, 23, null, Math.floor(Math.random() * 2) == 0 ? false : true); + obj.setPadding(0, 0); + treeRowStructure.addObject(obj, true); + + // The label + treeRowStructure.addLabel(vLabel); + + // All else should be right justified + obj = new qx.ui.basic.HorizontalSpacer; + treeRowStructure.addObject(obj, true); + + // Add a file size, date and mode + obj = new qx.ui.basic.Label(Math.round(Math.random() * 100) + "kb"); + obj.setWidth(50); + treeRowStructure.addObject(obj, true); + obj = new qx.ui.basic.Label( + "May " + Math.round(Math.random() * 30 + 1) + " 2005"); + obj.setWidth(150); + treeRowStructure.addObject(obj, true); + obj = new qx.ui.basic.Label("-rw-r--r--"); + obj.setWidth(80); + treeRowStructure.addObject(obj, true); + + return treeRowStructure; + } + + qx.core.Init.getInstance().defineMain(function() + { + var x = new qx.ui.basic.Atom("Test #1", "icon/16/reload.png", 16, 16); + x.debug("In main"); + + var t = new qx.ui.treefullcontrol.Tree(stuff("Root")); + with(t) + { + setBackgroundColor(255); + setBorder(qx.renderer.border.BorderPresets.getInstance().inset); + setOverflow("scrollY"); + + setHeight(null); + setTop(48); + setLeft(20); + setWidth(600); + setBottom(48); + }; + + qx.ui.core.ClientDocument.getInstance().add(t); + // One icon for selected and one for unselected states + var te1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Desktop")); + t.add(te1); + + desktop = te1; + + var te1_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Files")); + var te1_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Workspace")); + var te1_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Network")); + var te1_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Trash")); + + te1.add(te1_1, te1_2, te1_3, te1_4); + + // One icon specified, and used for both selected unselected states + var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(stuff("Windows (C:)", "icon/16/harddrive.png")); + var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(stuff("Documents (D:)", "icon/16/harddrive.png")); + + te1_2.add(te1_2_1, te1_2_2); + + arbeitsplatz = te1_2; + + + var te2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Inbox")); + posteingang = te2; + + var te2_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Presets")); + var te2_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Sent")); + var te2_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Trash", "icon/16/trash.png")); + var te2_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Data")); + var te2_5 = new qx.ui.treefullcontrol.TreeFolder(stuff("Edit")); + + editieren = te2_5; + + var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Chat")); + var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Pustefix")); + var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("TINC")); + + var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Announce")); + var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Devel")); + + te2_5_3.add(te2_5_3_1, te2_5_3_2); + + te2_5.add(te2_5_1, te2_5_2, te2_5_3); + + var te2_6 = new qx.ui.treefullcontrol.TreeFolder(stuff("Lists")); + + var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Relations")); + var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Company")); + var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Questions")); + var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Internal")); + var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(stuff("Products")); + var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(stuff("Press")); + var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(stuff("Development")); + var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(stuff("Competition")); + + te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8); + + var te2_7 = new qx.ui.treefullcontrol.TreeFolder(stuff("Personal")); + + var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Bugs")); + var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Family")); + var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Projects")); + var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Holiday")); + + te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4); + + var te2_8 = new qx.ui.treefullcontrol.TreeFolder(stuff("Big")); + + for (var i=0;i<50; i++) { + te2_8.add(new qx.ui.treefullcontrol.TreeFolder(stuff("Item " + i))); + }; + + var te2_9 = new qx.ui.treefullcontrol.TreeFolder(stuff("Spam")); + spam = te2_9; + + te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9); + + t.add(te2); + qx.ui.core.ClientDocument.getInstance().add(t); + + + + + + + var commandFrame = new qx.ui.groupbox.GroupBox("Control"); + + with(commandFrame) + { + setTop(48); + setLeft(650); + + setWidth("auto"); + setHeight("auto"); + }; + + qx.ui.core.ClientDocument.getInstance().add(commandFrame); + + + + + var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: "); + + with(tCurrentLabel) + { + setLeft(0); + setTop(0); + }; + + commandFrame.add(tCurrentLabel); + + + + var tCurrentInput = new qx.ui.form.TextField; + + with(tCurrentInput) + { + setLeft(0); + setRight(0); + setTop(20); + + setReadOnly(true); + }; + + commandFrame.add(tCurrentInput); + + t.getManager().addEventListener("changeSelection", function(e) { + tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml()); + }); + + + + var tDoubleClick = new qx.ui.form.CheckBox("Use double click?"); + + with(tDoubleClick) { + setTop(60); + setLeft(0); + }; + + commandFrame.add(tDoubleClick); + + tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); }); + + + + + var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?"); + + with(tTreeLines) { + setTop(80); + setLeft(0); + setChecked(true); + }; + + commandFrame.add(tTreeLines); + + tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); }); + + + + + var tHideNode = new qx.ui.form.CheckBox("Hide the root node?"); + + with(tHideNode) { + setTop(100); + setLeft(0); + setChecked(false); + }; + + commandFrame.add(tHideNode); + + tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); }); + + }); + </script> +</body> +</html> |