webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_4.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo &raquo; Sample</title>
   5   <link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/sample.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Demonstrate providing initially-selected tree nodes.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     // tree
  22     var tree = new qx.ui.treevirtual.TreeVirtual("Tree");
  23     with (tree)
  24     {
  25       set({
  26             left   : 10,
  27             top    : 30,
  28             width  : 400,
  29             bottom : 30,
  30             border : qx.renderer.border.BorderPresets.getInstance().thinInset
  31           });
  32       setColumnWidth(0, 400);
  33       setAlwaysShowOpenCloseSymbol(true);
  34     };
  35
  36     tree.setSelectionMode(
  37               qx.ui.treevirtual.TreeVirtual.SelectionMode.MULTIPLE_INTERVAL);
  38
  39     // Add the tree to the document
  40     tree.addToDocument();
  41
  42     // tree data model
  43     var dataModel = tree.getDataModel();
  44
  45     var te1 = dataModel.addBranch(null, "Desktop", true);
  46
  47     var x;
  48     var te;
  49     dataModel.addBranch(te1, "Files", true);
  50
  51     te = dataModel.addBranch(te1, "Workspace", true);
  52     x = dataModel.addLeaf(te, "Windows (C:)");
  53     tree.setState(x, { bSelected : true });
  54     x = dataModel.addLeaf(te, "Documents (D:)");
  55     tree.setState(x, { bSelected : true });
  56
  57     dataModel.addBranch(te1, "Network", true);
  58     dataModel.addBranch(te1, "Trash", true);
  59
  60     var te2 = dataModel.addBranch(null, "Inbox", true);
  61
  62     te = dataModel.addBranch(te2, "Spam", false);
  63     for (var i = 1; i < 3000; i++)
  64     {
  65       dataModel.addLeaf(te, "Spam Message #" + i);
  66     }
  67
  68     dataModel.addBranch(te2, "Sent", false);
  69     dataModel.addBranch(te2, "Trash", false);
  70     dataModel.addBranch(te2, "Data", false);
  71     dataModel.addBranch(te2, "Edit", false);
  72
  73     dataModel.setData();
  74
  75     var newItem = 1;
  76
  77     var commandFrame = new qx.ui.groupbox.GroupBox("Control");
  78     commandFrame.set({ top: 48, left: 520, right: 290, height: "auto" });
  79     commandFrame.addToDocument();
  80
  81     // Create a combo box for the selection type
  82     var o = new qx.ui.basic.Atom("Selection Mode: ");
  83     o.set({ top: 6, left: 0 });
  84     commandFrame.add(o);
  85
  86     o = new qx.ui.form.ComboBox();
  87     o.set({ top: 20, left: 4, width: "100%" });
  88     o.setEditable(false);
  89
  90     // Add the various selection types
  91     var item = new qx.ui.form.ListItem("No Selection");
  92     o.add(item);
  93     var item = new qx.ui.form.ListItem("Single Selection");
  94     o.add(item);
  95     var item = new qx.ui.form.ListItem("Single Interval Selection");
  96     o.add(item);
  97     var item = new qx.ui.form.ListItem("Multiple Interval Selection");
  98     o.add(item);
  99     o.setSelected(item);
 100
 101     // We want to be notified if the selection changes
 102     o.addEventListener(
 103       "changeSelected",
 104       function()
 105       {
 106         switch(this.getValue())
 107         {
 108         case "No Selection":
 109           tree.setSelectionMode(
 110             qx.ui.treevirtual.TreeVirtual.SelectionMode.NONE);
 111           break;
 112
 113         case "Single Selection":
 114           tree.setSelectionMode(
 115             qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE);
 116           break;
 117
 118         case "Single Interval Selection":
 119           tree.setSelectionMode(
 120             qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE_INTERVAL);
 121           break;
 122
 123         case "Multiple Interval Selection":
 124           tree.setSelectionMode(
 125             qx.ui.treevirtual.TreeVirtual.SelectionMode.MULTIPLE_INTERVAL);
 126           break;
 127         }
 128       });
 129
 130     commandFrame.add(o);
 131
 132   });
 133   </script>
 134 </body>
 135 </html>