3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 <p>Shows a tree, with user-defined icons for some nodes.</p>
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var t = new qx.ui.tree.Tree("Root");
25 setBackgroundColor(255);
26 setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
27 setOverflow("scrollY");
36 qx.ui.core.ClientDocument.getInstance().add(t);
37 // One icon for selected and one for unselected states
38 var te1 = new qx.ui.tree.TreeFolder("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
41 var te1_1 = new qx.ui.tree.TreeFolder("Files");
42 var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
43 var te1_3 = new qx.ui.tree.TreeFolder("Network");
44 var te1_4 = new qx.ui.tree.TreeFolder("Trash");
46 te1.add(te1_1, te1_2, te1_3, te1_4);
48 // One icon specified, and used for both selected unselected states
49 var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)", "icon/16/harddrive.png");
50 var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)", "icon/16/harddrive.png");
52 te1_2.add(te1_2_1, te1_2_2);
55 var te2 = new qx.ui.tree.TreeFolder("Inbox");
57 var te2_1 = new qx.ui.tree.TreeFolder("Presets");
58 var te2_2 = new qx.ui.tree.TreeFolder("Sent");
59 var te2_3 = new qx.ui.tree.TreeFolder("Trash", "icon/16/trash.png");
60 var te2_4 = new qx.ui.tree.TreeFolder("Data");
61 var te2_5 = new qx.ui.tree.TreeFolder("Edit");
63 var te2_5_1 = new qx.ui.tree.TreeFolder("Chat");
64 var te2_5_2 = new qx.ui.tree.TreeFolder("Pustefix");
65 var te2_5_3 = new qx.ui.tree.TreeFolder("TINC");
67 var te2_5_3_1 = new qx.ui.tree.TreeFolder("Announce");
68 var te2_5_3_2 = new qx.ui.tree.TreeFolder("Devel");
70 te2_5_3.add(te2_5_3_1, te2_5_3_2);
72 te2_5.add(te2_5_1, te2_5_2, te2_5_3);
74 var te2_6 = new qx.ui.tree.TreeFolder("Lists");
76 var te2_6_1 = new qx.ui.tree.TreeFolder("Relations");
77 var te2_6_2 = new qx.ui.tree.TreeFolder("Company");
78 var te2_6_3 = new qx.ui.tree.TreeFolder("Questions");
79 var te2_6_4 = new qx.ui.tree.TreeFolder("Internal");
80 var te2_6_5 = new qx.ui.tree.TreeFolder("Products");
81 var te2_6_6 = new qx.ui.tree.TreeFolder("Press");
82 var te2_6_7 = new qx.ui.tree.TreeFolder("Development");
83 var te2_6_8 = new qx.ui.tree.TreeFolder("Competition");
85 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);
87 var te2_7 = new qx.ui.tree.TreeFolder("Personal");
89 var te2_7_1 = new qx.ui.tree.TreeFolder("Bugs");
90 var te2_7_2 = new qx.ui.tree.TreeFolder("Family");
91 var te2_7_3 = new qx.ui.tree.TreeFolder("Projects");
92 var te2_7_4 = new qx.ui.tree.TreeFolder("Holiday");
94 te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
96 var te2_8 = new qx.ui.tree.TreeFolder("Big");
98 for (var i=0;i<50; i++) {
99 te2_8.add(new qx.ui.tree.TreeFolder("Item " + i));
102 var te2_9 = new qx.ui.tree.TreeFolder("Spam");
104 te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
107 qx.ui.core.ClientDocument.getInstance().add(t);
114 var commandFrame = new qx.ui.groupbox.GroupBox("Control");
125 qx.ui.core.ClientDocument.getInstance().add(commandFrame);
130 var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
138 commandFrame.add(tCurrentLabel);
142 var tCurrentInput = new qx.ui.form.TextField;
153 commandFrame.add(tCurrentInput);
155 t.getManager().addEventListener("changeSelection", function(e) {
156 tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
161 var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
168 commandFrame.add(tDoubleClick);
170 tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
175 var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
183 commandFrame.add(tTreeLines);
185 tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });