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>Testing qx.ui.listview.ListView with text cells.
</p>
16 <p>Added some buttons to fill/clear the list dynamically.
</p>
19 <script type=
"text/javascript">
20 qx
.core
.Init
.getInstance().defineMain(function()
23 var lt
= [ "Image", "Text", "PDF", "Illustration", "Document" ];
27 name
: { label
: "Name", width
: 100, type
: "text", sortable
: true, sortProp
: "text" },
28 size
: { label
: "Size", width
: 50, type
: "text", sortable
: true, sortProp
: "text", sortMethod
: qx
.util
.Compare
.byIntegerString
},
29 type
: { label
: "Type", width
: 80, type
: "text", sortable
: true, sortProp
: "text" },
30 modified
: { label
: "Last Modified", width
: 150, type
: "text" },
31 rights
: { label
: "Rights", width
: 80, type
: "text" }
34 var lv
= new qx
.ui
.listview
.ListView(ld
, lc
);
36 lv
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().shadow
);
37 lv
.setBackgroundColor("white");
40 lv
.setLocation(20, 48);
42 qx
.ui
.core
.ClientDocument
.getInstance().add(lv
);
48 for (var i
=0, t
; i
<nu
; i
++)
50 t
=Math
.round(Math
.random()*4);
51 ld
.push({ name
: { text
: "File " + ld
.length
}, size
: { text
: Math
.round(Math
.random()*100) + "kb" }, type
: { text
: lt
[t
] }, modified
: { text
: "Nov " + Math
.round(Math
.random() * 30 + 1) + " 2005" }, rights
: { text
: "-rw-r--r--" }});
60 nu
= Math
.min(ld
.length
, nu
|| 10);
62 ld
.splice(ld
.length
-nu
, nu
);
74 var btnAdd10
= new qx
.ui
.form
.Button("Add 10", "icon/16/insert-table-row.png");
75 var btnAdd50
= new qx
.ui
.form
.Button("Add 50", "icon/16/insert-table-row.png");
76 var btnAdd100
= new qx
.ui
.form
.Button("Add 100", "icon/16/insert-table-row.png");
77 var btnAdd1000
= new qx
.ui
.form
.Button("Add 1000", "icon/16/insert-table-row.png");
79 var btnRemove10
= new qx
.ui
.form
.Button("Remove 10", "icon/16/delete-table-row.png");
80 var btnRemove50
= new qx
.ui
.form
.Button("Remove 50", "icon/16/delete-table-row.png");
81 var btnRemove100
= new qx
.ui
.form
.Button("Remove 100", "icon/16/delete-table-row.png");
82 var btnRemove1000
= new qx
.ui
.form
.Button("Remove 1000", "icon/16/delete-table-row.png");
84 var btnClear
= new qx
.ui
.form
.Button("Clear", "icon/16/delete-table.png");
86 btnAdd10
.setLocation(550, 48);
87 btnAdd50
.setLocation(550, 78);
88 btnAdd100
.setLocation(550, 108);
89 btnAdd1000
.setLocation(550, 138);
91 btnRemove10
.setLocation(550, 188);
92 btnRemove50
.setLocation(550, 218);
93 btnRemove100
.setLocation(550, 248);
94 btnRemove1000
.setLocation(550, 278);
96 btnClear
.setLocation(550, 328);
98 btnAdd10
.addEventListener("execute", function(e
) { add(10); });
99 btnAdd50
.addEventListener("execute", function(e
) { add(50); });
100 btnAdd100
.addEventListener("execute", function(e
) { add(100); });
101 btnAdd1000
.addEventListener("execute", function(e
) { add(1000); });
103 btnRemove10
.addEventListener("execute", function(e
) { remove(10); });
104 btnRemove50
.addEventListener("execute", function(e
) { remove(50); });
105 btnRemove100
.addEventListener("execute", function(e
) { remove(100); });
106 btnRemove1000
.addEventListener("execute", function(e
) { remove(1000); });
108 btnClear
.addEventListener("execute", function(e
) { clear(); });
110 qx
.ui
.core
.ClientDocument
.getInstance().add(btnAdd10
, btnAdd50
, btnAdd100
, btnAdd1000
, btnRemove10
, btnRemove50
, btnRemove100
, btnRemove1000
, btnClear
);