3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 <p>List implementation</p>
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var d = qx.ui.core.ClientDocument.getInstance();
23 var l1 = new qx.ui.form.List;
25 l1.set({ top : 48, left: 20, height: 200, width: 150, overflow : "scrollY" });
28 for( var i=1; i<=35; i++ )
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");
33 !(i % 9) && (item.setEnabled(false));
40 var l2 = new qx.ui.form.List;
42 l2.set({ top : 48, left: 400, height: 200, width: 150 });
43 l2.getManager().setMultiSelection(false);
44 //l2.setOverflow("scrollY");
47 var l2l = [ "red", "violett", "rose", "blue", "green", "cyan", "magenta", "yellow", "brown", "orange", "black", "white", "grey", "gray", "brown" ];
49 for (var i=0; i<l2l.length; i++) {
50 l2.add(new qx.ui.form.ListItem(l2l[i]));
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");
63 c1.setLocation(180, 48);
64 c2.setLocation(180, 68);
65 c3.setLocation(180, 88);
66 c4.setLocation(180, 108);
68 d.add(c1, c2, c3, c4);
75 c1.addEventListener("changeChecked", function(e) {
76 l1.getManager().setMultiSelection(e.getData());
79 c2.addEventListener("changeChecked", function(e) {
80 l1.getManager().setDragSelection(e.getData());
83 c3.addEventListener("changeChecked", function(e) {
84 l1.getManager().setCanDeselect(e.getData());
87 c4.addEventListener("changeChecked", function(e) {
88 l1.setEnableInlineFind(e.getData());
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");
99 rd1.set( { left: 180, top: 128 } );
100 rd2.set( { left: 180, top: 148 } );
101 rd3.set( { left: 180, top: 168 } );
103 d.add(rd1, rd2, rd3);
105 rd3.setChecked(true);
107 var rbm = new qx.manager.selection.RadioManager( name, [rd1, rd2, rd3]);
109 rbm.addEventListener("changeSelected", function(e)
111 for( var i=0; i<l1.getChildrenLength(); i++ ) {
112 l1.getChildren()[i].setShow(e.getData().getValue());
120 qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 400);
123 qx.manager.object.ColorManager.getInstance().createThemeList(d, 200, 400);