swat/apps/qooxdoo-examples/example/TreeFullControl_1.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>Shows a tree, with user-defined icons for some nodes.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
  22       var t = new qx.ui.treefullcontrol.Tree(trs);
  23
  24       with(t)
  25       {
  26         setBackgroundColor(255);
  27         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  28         setOverflow("scrollY");
  29
  30         setHeight(null);
  31         setTop(48);
  32         setLeft(20);
  33         setWidth(200);
  34         setBottom(48);
  35       };
  36
  37       qx.ui.core.ClientDocument.getInstance().add(t);
  38       // One icon for selected and one for unselected states
  39       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
  40       var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  41       t.add(te1);
  42
  43       desktop = te1;
  44
  45       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
  46       var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  47       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
  48       var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  49       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
  50       var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  51       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
  52       var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
  53
  54       te1.add(te1_1, te1_2, te1_3, te1_4);
  55
  56       // One icon specified, and used for both selected unselected states
  57       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
  58       var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
  59       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
  60       var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
  61
  62       te1_2.add(te1_2_1, te1_2_2);
  63
  64       arbeitsplatz = te1_2;
  65
  66
  67       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
  68       var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  69       posteingang = te2;
  70
  71       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
  72       var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  73       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
  74       var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  75       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
  76       var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  77       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
  78       var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
  79       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
  80       var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
  81
  82       editieren = te2_5;
  83
  84       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
  85       var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  86       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
  87       var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  88       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
  89       var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  90
  91       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
  92       var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  93       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
  94       var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  95
  96       te2_5_3.add(te2_5_3_1, te2_5_3_2);
  97
  98       te2_5.add(te2_5_1, te2_5_2, te2_5_3);
  99
 100       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
 101       var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 102
 103       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
 104       var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 105       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
 106       var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 107       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
 108       var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 109       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
 110       var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 111       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
 112       var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
 113       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
 114       var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 115       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
 116       var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 117       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
 118       var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 119
 120       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);
 121
 122       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
 123       var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 124
 125       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
 126       var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 127       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
 128       var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 129       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
 130       var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 131       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
 132       var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 133
 134       te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
 135
 136       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
 137       var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 138
 139       for (var i=0;i<50; i++) {
 140         trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
 141         te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
 142       };
 143
 144       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
 145       var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
 146       spam = te2_9;
 147
 148       te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
 149
 150       t.add(te2);
 151       qx.ui.core.ClientDocument.getInstance().add(t);
 152
 153
 154
 155
 156
 157
 158       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
 159
 160       with(commandFrame)
 161       {
 162         setTop(48);
 163         setLeft(250);
 164
 165         setWidth("auto");
 166         setHeight("auto");
 167       };
 168
 169       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
 170
 171
 172
 173
 174       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
 175
 176       with(tCurrentLabel)
 177       {
 178         setLeft(0);
 179         setTop(0);
 180       };
 181
 182       commandFrame.add(tCurrentLabel);
 183
 184
 185
 186       var tCurrentInput = new qx.ui.form.TextField;
 187
 188       with(tCurrentInput)
 189       {
 190         setLeft(0);
 191         setRight(0);
 192         setTop(20);
 193
 194         setReadOnly(true);
 195       };
 196
 197       commandFrame.add(tCurrentInput);
 198
 199       t.getManager().addEventListener("changeSelection", function(e) {
 200         tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 201       });
 202
 203
 204
 205       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 206
 207       with(tDoubleClick) {
 208         setTop(60);
 209         setLeft(0);
 210       };
 211
 212       commandFrame.add(tDoubleClick);
 213
 214       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 215
 216
 217
 218
 219       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 220
 221       with(tTreeLines) {
 222         setTop(80);
 223         setLeft(0);
 224         setChecked(true);
 225       };
 226
 227       commandFrame.add(tTreeLines);
 228
 229       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 230
 231
 232     });
 233   </script>
 234 </body>
 235 </html>