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>A table having few rows.
</p>
18 <script type=
"text/javascript">
19 qx
.core
.Init
.getInstance().defineMain(function()
21 var d
= qx
.ui
.core
.ClientDocument
.getInstance();
23 var main
= new qx
.ui
.layout
.VerticalBoxLayout();
24 main
.set({ left
:10, top
:30, right
:300, bottom
:30 });
27 var tableModel
= new qx
.ui
.table
.SimpleTableModel();
28 tableModel
.setColumns([ "ID", "A number", "A date", "Boolean test" ]);
30 var now
= new Date().getTime();
31 var dateRange
= 400 * 24 * 60 * 60 * 1000; // 400 days
32 for (var row
= 0; row
< 50; row
++) {
33 var date
= new Date(now
+ Math
.random() * dateRange
- dateRange
/ 2);
34 rowData
.push([ row
, Math
.random() * 10000, date
, (Math
.random() > 0.5) ]);
36 tableModel
.setData(rowData
);
37 tableModel
.setColumnEditable(1, true);
38 tableModel
.setColumnEditable(2, true);
41 var table
= new qx
.ui
.table
.Table(tableModel
);
43 setDimension("100%", "1*");
44 getSelectionModel().setSelectionMode(qx
.ui
.table
.SelectionModel
.MULTIPLE_INTERVAL_SELECTION
);
45 getTableColumnModel().setDataCellRenderer(3, new qx
.ui
.table
.BooleanDataCellRenderer());
46 setColumnWidth(0, 80);
47 setColumnWidth(1, 200);
48 setColumnWidth(2, 150);
52 var button
= new qx
.ui
.form
.Button("Change row with ID 10");
53 button
.addEventListener("execute", function(evt
) {
54 tableModel
.setValue(1, 10, Math
.random() * 10000);
55 var date
= new Date(now
+ Math
.random() * dateRange
- dateRange
/ 2);
56 tableModel
.setValue(2, 10, date
);
57 tableModel
.setValue(3, 10, (Math
.random() > 0.5));
58 this.info("Row 10 changed");