webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/List_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>List implementation</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var d = qx.ui.core.ClientDocument.getInstance();
  22
  23       var l1 = new qx.ui.form.List;
  24
  25       l1.set({ top : 48, left: 20, height: 200, width: 150, overflow : "scrollY" });
  26
  27       var item;
  28       for( var i=1; i<=35; i++ )
  29       {
  30         // item = new qx.ui.form.ListItem("Item No " + i);
  31         item = new qx.ui.form.ListItem("Item No " + i, "icon/" + ((i % 4) ? "16" : "48") + "/folder.png");
  32
  33         !(i % 9) && (item.setEnabled(false));
  34
  35         l1.add(item);
  36       };
  37
  38       d.add(l1);
  39
  40       var l2 = new qx.ui.form.List;
  41
  42       l2.set({ top : 48, left: 400, height: 200, width: 150 });
  43       l2.getManager().setMultiSelection(false);
  44       //l2.setOverflow("scrollY");
  45       l2.setHeight("auto");
  46
  47       var l2l = [ "red", "violett", "rose", "blue", "green", "cyan", "magenta", "yellow", "brown", "orange", "black", "white", "grey", "gray", "brown" ];
  48
  49       for (var i=0; i<l2l.length; i++) {
  50         l2.add(new qx.ui.form.ListItem(l2l[i]));
  51       };
  52
  53       d.add(l2);
  54
  55
  56
  57
  58       var c1 = new qx.ui.form.CheckBox("Enable Multi-Selection");
  59       var c2 = new qx.ui.form.CheckBox("Enable Drag-Selection");
  60       var c3 = new qx.ui.form.CheckBox("Allow Deselection");
  61       var c4 = new qx.ui.form.CheckBox("Enable Inline Find");
  62
  63       c1.setLocation(180, 48);
  64       c2.setLocation(180, 68);
  65       c3.setLocation(180, 88);
  66       c4.setLocation(180, 108);
  67
  68       d.add(c1, c2, c3, c4);
  69
  70       c1.setChecked(true);
  71       c2.setChecked(true);
  72       c3.setChecked(true);
  73       c4.setChecked(true);
  74
  75       c1.addEventListener("changeChecked", function(e) {
  76         l1.getManager().setMultiSelection(e.getData());
  77       });
  78
  79       c2.addEventListener("changeChecked", function(e) {
  80         l1.getManager().setDragSelection(e.getData());
  81       });
  82
  83       c3.addEventListener("changeChecked", function(e) {
  84         l1.getManager().setCanDeselect(e.getData());
  85       });
  86
  87       c4.addEventListener("changeChecked", function(e) {
  88         l1.setEnableInlineFind(e.getData());
  89       });
  90
  91
  92
  93
  94
  95       var rd1 = new qx.ui.form.RadioButton("Show Label", "label");
  96       var rd2 = new qx.ui.form.RadioButton("Show Icon", "icon");
  97       var rd3 = new qx.ui.form.RadioButton("Show Both", "both");
  98
  99       rd1.set( { left: 180, top: 128 } );
 100       rd2.set( { left: 180, top: 148 } );
 101       rd3.set( { left: 180, top: 168 } );
 102
 103       d.add(rd1, rd2, rd3);
 104
 105       rd3.setChecked(true);
 106
 107       var rbm = new qx.manager.selection.RadioManager( name, [rd1, rd2, rd3]);
 108
 109       rbm.addEventListener("changeSelected", function(e)
 110       {
 111         for( var i=0; i<l1.getChildrenLength(); i++ ) {
 112           l1.getChildren()[i].setShow(e.getData().getValue());
 113         }
 114       });
 115
 116
 117
 118
 119       // Icon Themes
 120       qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 400);
 121
 122       // Color Themes
 123       qx.manager.object.ColorManager.getInstance().createThemeList(d, 200, 400);
 124     });
 125   </script>
 126 </body>
 127 </html>