swat/apps/qooxdoo-examples/test/Tree_7.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>Trying dynamic Folder and File creation and deletion.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19
  20   function createItems (t) {
  21       var te1 = new qx.ui.tree.TreeFolder("Desktop");
  22       t.add(te1);
  23
  24       desktop = te1;
  25
  26       var te1_1 = new qx.ui.tree.TreeFolder("Files");
  27       var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
  28       var te1_3 = new qx.ui.tree.TreeFolder("Network");
  29       var te1_4 = new qx.ui.tree.TreeFolder("Trash");
  30
  31       te1.add(te1_1, te1_2, te1_3, te1_4);
  32
  33
  34       var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)");
  35       var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)");
  36
  37       te1_2.add(te1_2_1, te1_2_2);
  38
  39       arbeitsplatz = te1_2;
  40
  41
  42       var te2 = new qx.ui.tree.TreeFolder("Inbox");
  43       posteingang = te2;
  44
  45       var te2_1 = new qx.ui.tree.TreeFolder("Presets");
  46       var te2_2 = new qx.ui.tree.TreeFolder("Sent");
  47       var te2_3 = new qx.ui.tree.TreeFolder("Trash");
  48       var te2_4 = new qx.ui.tree.TreeFolder("Data");
  49       var te2_5 = new qx.ui.tree.TreeFolder("Edit");
  50
  51       t.add(te2);
  52                 }
  53
  54     qx.core.Init.getInstance().defineMain(function()
  55     {
  56       var t = new qx.ui.tree.Tree("Root");
  57
  58       with(t)
  59       {
  60         setBackgroundColor(255);
  61         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  62         setOverflow("scrollY");
  63
  64         setHeight(null);
  65         setTop(48);
  66         setLeft(20);
  67         setWidth(200);
  68         setBottom(48);
  69       };
  70
  71       qx.ui.core.ClientDocument.getInstance().add(t);
  72
  73
  74
  75       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
  76
  77       with(commandFrame)
  78       {
  79         setTop(48);
  80         setLeft(250);
  81
  82         setWidth("auto");
  83         setHeight("auto");
  84       };
  85
  86       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
  87
  88
  89
  90
  91       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
  92
  93       with(tCurrentLabel)
  94       {
  95         setLeft(0);
  96         setTop(0);
  97       };
  98
  99       commandFrame.add(tCurrentLabel);
 100
 101
 102
 103       var tCurrentInput = new qx.ui.form.TextField;
 104
 105       with(tCurrentInput)
 106       {
 107         setLeft(0);
 108         setRight(0);
 109         setTop(20);
 110
 111         setReadOnly(true);
 112       };
 113
 114       commandFrame.add(tCurrentInput);
 115
 116       t.getManager().addEventListener("changeSelection", function(e) {
 117         if(e.getData()[0]) {
 118                 tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 119                 this.debug('classname: ' + e.getData()[0].classname);
 120         }
 121         else {
 122                 tCurrentInput.setValue('');
 123         }
 124       });
 125
 126
 127
 128       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 129
 130       with(tDoubleClick) {
 131         setTop(60);
 132         setLeft(0);
 133       };
 134
 135       commandFrame.add(tDoubleClick);
 136
 137       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 138
 139
 140
 141       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 142
 143       with(tTreeLines) {
 144         setTop(80);
 145         setLeft(0);
 146         setChecked(true);
 147       };
 148
 149       commandFrame.add(tTreeLines);
 150
 151       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 152
 153
 154
 155
 156       var vShowItems = new qx.ui.form.Button("Show Items");
 157
 158       with(vShowItems) {
 159         setTop(100);
 160         setLeft(0);
 161       };
 162
 163       commandFrame.add(vShowItems);
 164
 165       vShowItems.addEventListener("execute", function(e) {
 166         alert(t.getItems());
 167       });
 168
 169
 170       var vRemoveAllItems = new qx.ui.form.Button("Remove All Items");
 171
 172       with(vRemoveAllItems) {
 173         setTop(180);
 174         setLeft(0);
 175       };
 176
 177       commandFrame.add(vRemoveAllItems);
 178
 179       vRemoveAllItems.addEventListener("execute", function(e) {
 180                                 t.destroyContent();
 181       });
 182
 183
 184       var vCreateItems = new qx.ui.form.Button("Create Items");
 185
 186       with(vCreateItems) {
 187         setTop(140);
 188         setLeft(0);
 189       };
 190
 191       commandFrame.add(vCreateItems);
 192
 193                         vCreateItems.addEventListener("execute", function(e) {
 194                                 createItems(t);
 195                         });
 196
 197       var vRemoveSelectedItem = new qx.ui.form.Button("Remove selected Item");
 198
 199       with(vRemoveSelectedItem) {
 200         setTop(220);
 201         setLeft(0);
 202       };
 203
 204       commandFrame.add(vRemoveSelectedItem);
 205
 206       vRemoveSelectedItem.addEventListener("execute", function(e) {
 207         var vItem = t.getManager().getSelectedItem();
 208         if(vItem) {
 209                 vItem.destroy();
 210               }
 211       });
 212
 213     });
 214   </script>
 215 </body>
 216 </html>