swat.obsolete/apps/qooxdoo-examples/test/Tree_3.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Nothing special, like the previous example but here the tree lines are by default off.</p>
  16     <p>This allows you to easily compare the performance costs for the tree lines: Just compare this and the previous example.</p>
  17   </div>
  18
  19   <script type="text/javascript">
  20     qx.core.Init.getInstance().defineMain(function()
  21     {
  22       var t = new qx.ui.tree.Tree("Root");
  23
  24       with(t)
  25       {
  26         setBackgroundColor(255);
  27         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  28         setOverflow("scrollY");
  29         setUseTreeLines(false);
  30
  31         setHeight(null);
  32         setTop(48);
  33         setLeft(20);
  34         setWidth(200);
  35         setBottom(48);
  36       };
  37
  38       qx.ui.core.ClientDocument.getInstance().add(t);
  39
  40       var te1 = new qx.ui.tree.TreeFolder("Desktop");
  41       t.add(te1);
  42
  43       desktop = te1;
  44
  45       var te1_1 = new qx.ui.tree.TreeFolder("Files");
  46       var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
  47       var te1_3 = new qx.ui.tree.TreeFolder("Network");
  48       var te1_4 = new qx.ui.tree.TreeFolder("Trash");
  49
  50       te1.add(te1_1, te1_2, te1_3, te1_4);
  51
  52
  53       var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)");
  54       var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)");
  55
  56       te1_2.add(te1_2_1, te1_2_2);
  57
  58       arbeitsplatz = te1_2;
  59
  60
  61       var te2 = new qx.ui.tree.TreeFolder("Inbox");
  62       posteingang = te2;
  63
  64       var te2_1 = new qx.ui.tree.TreeFolder("Presets");
  65       var te2_2 = new qx.ui.tree.TreeFolder("Sent");
  66       var te2_3 = new qx.ui.tree.TreeFolder("Trash");
  67       var te2_4 = new qx.ui.tree.TreeFolder("Data");
  68       var te2_5 = new qx.ui.tree.TreeFolder("Edit");
  69
  70       editieren = te2_5;
  71
  72       var te2_5_1 = new qx.ui.tree.TreeFolder("Chat");
  73       var te2_5_2 = new qx.ui.tree.TreeFolder("Pustefix");
  74       var te2_5_3 = new qx.ui.tree.TreeFolder("TINC");
  75
  76       var te2_5_3_1 = new qx.ui.tree.TreeFolder("Announce");
  77       var te2_5_3_2 = new qx.ui.tree.TreeFolder("Devel");
  78
  79       te2_5_3.add(te2_5_3_1, te2_5_3_2);
  80
  81       te2_5.add(te2_5_1, te2_5_2, te2_5_3);
  82
  83       var te2_6 = new qx.ui.tree.TreeFolder("Lists");
  84
  85       var te2_6_1 = new qx.ui.tree.TreeFolder("Relations");
  86       var te2_6_2 = new qx.ui.tree.TreeFolder("Company");
  87       var te2_6_3 = new qx.ui.tree.TreeFolder("Questions");
  88       var te2_6_4 = new qx.ui.tree.TreeFolder("Internal");
  89       var te2_6_5 = new qx.ui.tree.TreeFolder("Products");
  90       var te2_6_6 = new qx.ui.tree.TreeFolder("Press");
  91       var te2_6_7 = new qx.ui.tree.TreeFolder("Development");
  92       var te2_6_8 = new qx.ui.tree.TreeFolder("Competition");
  93
  94       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);
  95
  96       var te2_7 = new qx.ui.tree.TreeFolder("Personal");
  97
  98       var te2_7_1 = new qx.ui.tree.TreeFolder("Bugs");
  99       var te2_7_2 = new qx.ui.tree.TreeFolder("Family");
 100       var te2_7_3 = new qx.ui.tree.TreeFolder("Projects");
 101       var te2_7_4 = new qx.ui.tree.TreeFolder("Holiday");
 102
 103       te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
 104
 105       var te2_8 = new qx.ui.tree.TreeFolder("Big");
 106
 107       for (var i=0;i<50; i++) {
 108         te2_8.add(new qx.ui.tree.TreeFolder("Item " + i));
 109       };
 110
 111       var te2_9 = new qx.ui.tree.TreeFolder("Spam");
 112       spam = te2_9;
 113
 114       te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
 115
 116       t.add(te2);
 117       qx.ui.core.ClientDocument.getInstance().add(t);
 118
 119
 120
 121
 122
 123
 124       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
 125
 126       with(commandFrame)
 127       {
 128         setTop(48);
 129         setLeft(250);
 130
 131         setWidth("auto");
 132         setHeight("auto");
 133       };
 134
 135       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
 136
 137
 138
 139
 140       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
 141
 142       with(tCurrentLabel)
 143       {
 144         setLeft(0);
 145         setTop(0);
 146       };
 147
 148       commandFrame.add(tCurrentLabel);
 149
 150
 151
 152       var tCurrentInput = new qx.ui.form.TextField;
 153
 154       with(tCurrentInput)
 155       {
 156         setLeft(0);
 157         setRight(0);
 158         setTop(20);
 159
 160         setReadOnly(true);
 161       };
 162
 163       commandFrame.add(tCurrentInput);
 164
 165       t.getManager().addEventListener("changeSelection", function(e) {
 166         tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 167       });
 168
 169
 170
 171
 172       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 173
 174       with(tDoubleClick) {
 175         setTop(60);
 176         setLeft(0);
 177       };
 178
 179       commandFrame.add(tDoubleClick);
 180
 181       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 182
 183
 184       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 185
 186       with(tTreeLines) {
 187         setTop(80);
 188         setLeft(0);
 189         setChecked(false);
 190       };
 191
 192       commandFrame.add(tTreeLines);
 193
 194       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 195
 196
 197
 198     });
 199   </script>
 200 </body>
 201 </html>