swat.obsolete/apps/qooxdoo-examples/test/Tree_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>Introducing qx.ui.tree.Tree. A first small example.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var t = new qx.ui.tree.Tree("Root");
  22
  23       with(t)
  24       {
  25         setBackgroundColor(255);
  26         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  27         setOverflow("scrollY");
  28
  29         setHeight(null);
  30         setTop(48);
  31         setLeft(20);
  32         setWidth(200);
  33         setBottom(48);
  34       };
  35
  36       qx.ui.core.ClientDocument.getInstance().add(t);
  37
  38
  39       var te1 = new qx.ui.tree.TreeFolder("Desktop");
  40       t.add(te1);
  41
  42       desktop = te1;
  43
  44       var te1_1 = new qx.ui.tree.TreeFolder("Files");
  45       var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
  46       var te1_3 = new qx.ui.tree.TreeFolder("Network");
  47       var te1_4 = new qx.ui.tree.TreeFolder("Trash");
  48
  49       te1.add(te1_1, te1_2, te1_3, te1_4);
  50
  51
  52       var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)");
  53       var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)");
  54
  55       te1_2.add(te1_2_1, te1_2_2);
  56
  57       arbeitsplatz = te1_2;
  58
  59
  60       var te2 = new qx.ui.tree.TreeFolder("Inbox");
  61       posteingang = te2;
  62
  63       var te2_1 = new qx.ui.tree.TreeFolder("Presets");
  64       var te2_2 = new qx.ui.tree.TreeFolder("Sent");
  65       var te2_3 = new qx.ui.tree.TreeFolder("Trash");
  66       var te2_4 = new qx.ui.tree.TreeFolder("Data");
  67       var te2_5 = new qx.ui.tree.TreeFolder("Edit");
  68
  69
  70
  71       t.add(te2);
  72       qx.ui.core.ClientDocument.getInstance().add(t);
  73
  74
  75
  76
  77
  78
  79       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
  80
  81       with(commandFrame)
  82       {
  83         setTop(48);
  84         setLeft(250);
  85
  86         setWidth("auto");
  87         setHeight("auto");
  88       };
  89
  90       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
  91
  92
  93
  94
  95       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
  96
  97       with(tCurrentLabel)
  98       {
  99         setLeft(0);
 100         setTop(0);
 101       };
 102
 103       commandFrame.add(tCurrentLabel);
 104
 105
 106
 107       var tCurrentInput = new qx.ui.form.TextField;
 108
 109       with(tCurrentInput)
 110       {
 111         setLeft(0);
 112         setRight(0);
 113         setTop(20);
 114
 115         setReadOnly(true);
 116       };
 117
 118       commandFrame.add(tCurrentInput);
 119
 120       t.getManager().addEventListener("changeSelection", function(e) {
 121         tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 122       });
 123
 124
 125
 126       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 127
 128       with(tDoubleClick) {
 129         setTop(60);
 130         setLeft(0);
 131       };
 132
 133       commandFrame.add(tDoubleClick);
 134
 135       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 136
 137
 138
 139       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 140
 141       with(tTreeLines) {
 142         setTop(80);
 143         setLeft(0);
 144         setChecked(true);
 145       };
 146
 147       commandFrame.add(tTreeLines);
 148
 149       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 150
 151
 152
 153
 154       var vShowItems = new qx.ui.form.Button("Show Items");
 155
 156       with(vShowItems) {
 157         setTop(100);
 158         setLeft(0);
 159       };
 160
 161       commandFrame.add(vShowItems);
 162
 163       vShowItems.addEventListener("execute", function(e) {
 164         alert(t.getItems());
 165       });
 166
 167
 168     });
 169   </script>
 170 </body>
 171 </html>