| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
2 |
<html>
|
|
|
3 |
<head>
|
|
|
4 |
<title>Test dojox.Grid Events</title>
|
|
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
|
|
|
6 |
<style type="text/css">
|
|
|
7 |
@import "../_grid/Grid.css";
|
|
|
8 |
body,td,th {
|
|
|
9 |
font-family: Geneva, Arial, Helvetica, sans-serif;
|
|
|
10 |
}
|
|
|
11 |
#grid {
|
|
|
12 |
border: 1px solid;
|
|
|
13 |
border-top-color: #F6F4EB;
|
|
|
14 |
border-right-color: #ACA899;
|
|
|
15 |
border-bottom-color: #ACA899;
|
|
|
16 |
border-left-color: #F6F4EB;
|
|
|
17 |
}
|
|
|
18 |
#grid {
|
|
|
19 |
width: 50em;
|
|
|
20 |
height: 20em;
|
|
|
21 |
padding: 1px;
|
|
|
22 |
overflow: hidden;
|
|
|
23 |
font-size: small;
|
|
|
24 |
}
|
|
|
25 |
h3 {
|
|
|
26 |
margin: 10px 0 2px 0;
|
|
|
27 |
}
|
|
|
28 |
.fade {
|
|
|
29 |
/*background-image:url(images/fade.gif);*/
|
|
|
30 |
}
|
|
|
31 |
.no-fade {
|
|
|
32 |
/*background-image: none;*/
|
|
|
33 |
}
|
|
|
34 |
#eventGrid {
|
|
|
35 |
float: right;
|
|
|
36 |
font-size: small;
|
|
|
37 |
}
|
|
|
38 |
</style>
|
|
|
39 |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
|
|
|
40 |
<script type="text/javascript">
|
|
|
41 |
dojo.require("dojox.grid.Grid");
|
|
|
42 |
dojo.require("dojox.grid._data.model");
|
|
|
43 |
dojo.require("dojo.parser");
|
|
|
44 |
</script>
|
|
|
45 |
<script type="text/javascript">
|
|
|
46 |
// events to track
|
|
|
47 |
var eventRows = [
|
|
|
48 |
{ name: 'onCellClick' },
|
|
|
49 |
{ name: 'onRowClick', properties: ['rowIndex'] },
|
|
|
50 |
{ name: 'onCellDblClick' },
|
|
|
51 |
{ name: 'onRowDblClick', properties: ['rowIndex'] },
|
|
|
52 |
{ name: 'onCellMouseOver' },
|
|
|
53 |
{ name: 'onCellMouseOut' },
|
|
|
54 |
{ name: 'onRowMouseOver' },
|
|
|
55 |
{ name: 'onRowMouseOut' },
|
|
|
56 |
{ name: 'onHeaderCellClick' },
|
|
|
57 |
{ name: 'onHeaderClick', properties: ['rowIndex'] },
|
|
|
58 |
{ name: 'onHeaderCellDblClick' },
|
|
|
59 |
{ name: 'onHeaderDblClick', properties: ['rowIndex'] },
|
|
|
60 |
{ name: 'onHeaderCellMouseOver' },
|
|
|
61 |
{ name: 'onHeaderCellMouseOut' },
|
|
|
62 |
{ name: 'onHeaderMouseOver' },
|
|
|
63 |
{ name: 'onHeaderMouseOut' },
|
|
|
64 |
{ name: 'onKeyDown', properties: ['keyCode'] },
|
|
|
65 |
{ name: 'onCellContextMenu' },
|
|
|
66 |
{ name: 'onRowContextMenu', properties: ['rowIndex'] },
|
|
|
67 |
{ name: 'onHeaderCellContextMenu' },
|
|
|
68 |
{ name: 'onHeaderContextMenu', properties: ['rowIndex'] }
|
|
|
69 |
];
|
|
|
70 |
|
|
|
71 |
getEventName = function(inRowIndex) {
|
|
|
72 |
return eventRows[inRowIndex].name;
|
|
|
73 |
};
|
|
|
74 |
|
|
|
75 |
getEventData = function(inRowIndex) {
|
|
|
76 |
var d = eventRows[inRowIndex].data;
|
|
|
77 |
var r = [];
|
|
|
78 |
if (d)
|
|
|
79 |
for (var i in d)
|
|
|
80 |
r.push(d[i]);
|
|
|
81 |
else
|
|
|
82 |
r.push('na')
|
|
|
83 |
return r.join(', ');
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
// grid structure for event tracking grid.
|
|
|
87 |
var eventView = {
|
|
|
88 |
noscroll: true,
|
|
|
89 |
cells: [[
|
|
|
90 |
{ name: 'Event', get: getEventName, width: 12 },
|
|
|
91 |
{ name: 'Data', get: getEventData, width: 10 }
|
|
|
92 |
]]
|
|
|
93 |
}
|
|
|
94 |
var eventLayout = [ eventView ];
|
|
|
95 |
|
|
|
96 |
var fade = function(inNode) {
|
|
|
97 |
if (!inNode || !inNode.style) return;
|
|
|
98 |
var c = 150, step = 5, delay = 20;
|
|
|
99 |
var animate = function() {
|
|
|
100 |
c = Math.min(c + step, 255);
|
|
|
101 |
inNode.style.backgroundColor = "rgb(" + c + ", " + c + ", 255)";
|
|
|
102 |
if (c < 255) window.setTimeout(animate, delay);
|
|
|
103 |
}
|
|
|
104 |
animate();
|
|
|
105 |
}
|
|
|
106 |
|
|
|
107 |
// setup a fade on a row. Must do this way to avoid caching of fade gif
|
|
|
108 |
updateRowFade = function(inRowIndex) {
|
|
|
109 |
var n = eventGrid.views.views[0].getRowNode(inRowIndex);
|
|
|
110 |
fade(n);
|
|
|
111 |
}
|
|
|
112 |
|
|
|
113 |
// store data about event. By default track event.rowIndex and event.cell.index, but eventRows can specify params, which are event properties to track.
|
|
|
114 |
setEventData = function(inIndex, inEvent) {
|
|
|
115 |
var eRow = eventRows[inIndex];
|
|
|
116 |
eRow.data = {};
|
|
|
117 |
var properties = eRow.properties;
|
|
|
118 |
if (properties)
|
|
|
119 |
for (var i=0, l=properties.length, p; (p=properties[i] || i < l); i++)
|
|
|
120 |
eRow.data[p] = inEvent[p];
|
|
|
121 |
else
|
|
|
122 |
eRow.data = {
|
|
|
123 |
row: (inEvent.rowIndex != undefined ? Number(inEvent.rowIndex) : 'na'),
|
|
|
124 |
cell: (inEvent.cell && inEvent.cell.index != undefined ? inEvent.cell.index : 'na')
|
|
|
125 |
}
|
|
|
126 |
eventGrid.updateRow(inIndex);
|
|
|
127 |
updateRowFade(inIndex);
|
|
|
128 |
}
|
|
|
129 |
|
|
|
130 |
// setup grid events for all events being tracked.
|
|
|
131 |
setGridEvents = function() {
|
|
|
132 |
var makeEvent = function(inIndex, inName) {
|
|
|
133 |
return function(e) {
|
|
|
134 |
setEventData(inIndex, e);
|
|
|
135 |
dojox.VirtualGrid.prototype[inName].apply(this, arguments);
|
|
|
136 |
}
|
|
|
137 |
}
|
|
|
138 |
for (var i=0, e; (e=eventRows[i]); i++)
|
|
|
139 |
grid[e.name] = makeEvent(i, e.name);
|
|
|
140 |
}
|
|
|
141 |
|
|
|
142 |
// Grid structure
|
|
|
143 |
var layout = [// array of view objects
|
|
|
144 |
{ type: 'dojox.GridRowView', width: '20px' },
|
|
|
145 |
{ noscroll: true, cells: [// array of rows, a row is an array of cells
|
|
|
146 |
[{ name: "Alpha", value: '<input type="checkbox"></input>', rowSpan: 2, width: 6, styles: 'text-align:center;' }, { name: "Alpha2", value: "Alpha2" }],
|
|
|
147 |
[{ name: "Alpha3", value: "Alpha3" }]
|
|
|
148 |
]},
|
|
|
149 |
{ cells: [
|
|
|
150 |
[{ name: "Beta", value: 'simple'}, { name: "Beta2", value: "Beta2" }, { name: "Beta3", value: "Beta3" }, { name: "Beta4", value: "Beta4" }, { name: "Beta5", value: "Beta5" }],
|
|
|
151 |
[{ name: "Summary", colSpan: 5, value: 'Summary' }]
|
|
|
152 |
]},
|
|
|
153 |
{ noscroll: true, cells: [
|
|
|
154 |
[{ name: "Gamma", value: "Gamma" }, { name: "Gamma2", value: "<button>Radiate</button>", styles: 'text-align:center;' }]]
|
|
|
155 |
}];
|
|
|
156 |
|
|
|
157 |
dojo.addOnLoad(function() {
|
|
|
158 |
window["grid"] = dijit.byId("grid");
|
|
|
159 |
window["eventGrid"] = dijit.byId("eventGrid");
|
|
|
160 |
grid.rows.defaultRowHeight = 4;
|
|
|
161 |
setGridEvents();
|
|
|
162 |
eventGrid.updateRowCount(eventRows.length);
|
|
|
163 |
dojo.debug = console.log;
|
|
|
164 |
});
|
|
|
165 |
</script>
|
|
|
166 |
</head>
|
|
|
167 |
<body>
|
|
|
168 |
<h3>dojox.Grid Event Tracking</h3>
|
|
|
169 |
<div id="eventGrid" autoWidth="true" autoHeight="true" structure="eventLayout" dojoType="dojox.VirtualGrid"></div>
|
|
|
170 |
<div id="grid" rowCount="100" dojoType="dojox.VirtualGrid"></div>
|
|
|
171 |
</body>
|
|
|
172 |
</html>
|