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 with virtual scrolling, model-view-controller, renderers,
16 fixed columns, editing, sorting, column resizing, column reordering,
20 <script type=
"text/javascript">
21 qx
.core
.Init
.getInstance().defineMain(function()
23 var d
= qx
.ui
.core
.ClientDocument
.getInstance();
26 var tableModel
= new qx
.ui
.table
.SimpleTableModel();
27 tableModel
.setColumns([ "ID", "A number", "A date", "Boolean test" ]);
29 var now
= new Date().getTime();
30 var dateRange
= 400 * 24 * 60 * 60 * 1000; // 400 days
31 for (var row
= 0; row
< 100; row
++) {
32 var date
= new Date(now
+ Math
.random() * dateRange
- dateRange
/ 2);
33 rowData
.push([ row
, Math
.random() * 10000, date
, (Math
.random() > 0.5) ]);
35 tableModel
.setData(rowData
);
36 tableModel
.setColumnEditable(1, true);
37 tableModel
.setColumnEditable(2, true);
40 var table
= new qx
.ui
.table
.Table(tableModel
);
42 set({ left
:10, top
:30, right
:300, bottom
:30 });
43 setMetaColumnCounts([1, -1]);
44 getSelectionModel().setSelectionMode(qx
.ui
.table
.SelectionModel
.MULTIPLE_INTERVAL_SELECTION
);
45 getTableColumnModel().setDataCellRenderer(3, new qx
.ui
.table
.BooleanDataCellRenderer());