New file |
0,0 → 1,172 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
<html> |
<head> |
<title>Test dojox.Grid Events</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> |
<style type="text/css"> |
@import "../_grid/Grid.css"; |
body,td,th { |
font-family: Geneva, Arial, Helvetica, sans-serif; |
} |
#grid { |
border: 1px solid; |
border-top-color: #F6F4EB; |
border-right-color: #ACA899; |
border-bottom-color: #ACA899; |
border-left-color: #F6F4EB; |
} |
#grid { |
width: 50em; |
height: 20em; |
padding: 1px; |
overflow: hidden; |
font-size: small; |
} |
h3 { |
margin: 10px 0 2px 0; |
} |
.fade { |
/*background-image:url(images/fade.gif);*/ |
} |
.no-fade { |
/*background-image: none;*/ |
} |
#eventGrid { |
float: right; |
font-size: small; |
} |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> |
<script type="text/javascript"> |
dojo.require("dojox.grid.Grid"); |
dojo.require("dojox.grid._data.model"); |
dojo.require("dojo.parser"); |
</script> |
<script type="text/javascript"> |
// events to track |
var eventRows = [ |
{ name: 'onCellClick' }, |
{ name: 'onRowClick', properties: ['rowIndex'] }, |
{ name: 'onCellDblClick' }, |
{ name: 'onRowDblClick', properties: ['rowIndex'] }, |
{ name: 'onCellMouseOver' }, |
{ name: 'onCellMouseOut' }, |
{ name: 'onRowMouseOver' }, |
{ name: 'onRowMouseOut' }, |
{ name: 'onHeaderCellClick' }, |
{ name: 'onHeaderClick', properties: ['rowIndex'] }, |
{ name: 'onHeaderCellDblClick' }, |
{ name: 'onHeaderDblClick', properties: ['rowIndex'] }, |
{ name: 'onHeaderCellMouseOver' }, |
{ name: 'onHeaderCellMouseOut' }, |
{ name: 'onHeaderMouseOver' }, |
{ name: 'onHeaderMouseOut' }, |
{ name: 'onKeyDown', properties: ['keyCode'] }, |
{ name: 'onCellContextMenu' }, |
{ name: 'onRowContextMenu', properties: ['rowIndex'] }, |
{ name: 'onHeaderCellContextMenu' }, |
{ name: 'onHeaderContextMenu', properties: ['rowIndex'] } |
]; |
|
getEventName = function(inRowIndex) { |
return eventRows[inRowIndex].name; |
}; |
|
getEventData = function(inRowIndex) { |
var d = eventRows[inRowIndex].data; |
var r = []; |
if (d) |
for (var i in d) |
r.push(d[i]); |
else |
r.push('na') |
return r.join(', '); |
} |
|
// grid structure for event tracking grid. |
var eventView = { |
noscroll: true, |
cells: [[ |
{ name: 'Event', get: getEventName, width: 12 }, |
{ name: 'Data', get: getEventData, width: 10 } |
]] |
} |
var eventLayout = [ eventView ]; |
|
var fade = function(inNode) { |
if (!inNode || !inNode.style) return; |
var c = 150, step = 5, delay = 20; |
var animate = function() { |
c = Math.min(c + step, 255); |
inNode.style.backgroundColor = "rgb(" + c + ", " + c + ", 255)"; |
if (c < 255) window.setTimeout(animate, delay); |
} |
animate(); |
} |
|
// setup a fade on a row. Must do this way to avoid caching of fade gif |
updateRowFade = function(inRowIndex) { |
var n = eventGrid.views.views[0].getRowNode(inRowIndex); |
fade(n); |
} |
|
// store data about event. By default track event.rowIndex and event.cell.index, but eventRows can specify params, which are event properties to track. |
setEventData = function(inIndex, inEvent) { |
var eRow = eventRows[inIndex]; |
eRow.data = {}; |
var properties = eRow.properties; |
if (properties) |
for (var i=0, l=properties.length, p; (p=properties[i] || i < l); i++) |
eRow.data[p] = inEvent[p]; |
else |
eRow.data = { |
row: (inEvent.rowIndex != undefined ? Number(inEvent.rowIndex) : 'na'), |
cell: (inEvent.cell && inEvent.cell.index != undefined ? inEvent.cell.index : 'na') |
} |
eventGrid.updateRow(inIndex); |
updateRowFade(inIndex); |
} |
|
// setup grid events for all events being tracked. |
setGridEvents = function() { |
var makeEvent = function(inIndex, inName) { |
return function(e) { |
setEventData(inIndex, e); |
dojox.VirtualGrid.prototype[inName].apply(this, arguments); |
} |
} |
for (var i=0, e; (e=eventRows[i]); i++) |
grid[e.name] = makeEvent(i, e.name); |
} |
|
// Grid structure |
var layout = [// array of view objects |
{ type: 'dojox.GridRowView', width: '20px' }, |
{ noscroll: true, cells: [// array of rows, a row is an array of cells |
[{ name: "Alpha", value: '<input type="checkbox"></input>', rowSpan: 2, width: 6, styles: 'text-align:center;' }, { name: "Alpha2", value: "Alpha2" }], |
[{ name: "Alpha3", value: "Alpha3" }] |
]}, |
{ cells: [ |
[{ name: "Beta", value: 'simple'}, { name: "Beta2", value: "Beta2" }, { name: "Beta3", value: "Beta3" }, { name: "Beta4", value: "Beta4" }, { name: "Beta5", value: "Beta5" }], |
[{ name: "Summary", colSpan: 5, value: 'Summary' }] |
]}, |
{ noscroll: true, cells: [ |
[{ name: "Gamma", value: "Gamma" }, { name: "Gamma2", value: "<button>Radiate</button>", styles: 'text-align:center;' }]] |
}]; |
|
dojo.addOnLoad(function() { |
window["grid"] = dijit.byId("grid"); |
window["eventGrid"] = dijit.byId("eventGrid"); |
grid.rows.defaultRowHeight = 4; |
setGridEvents(); |
eventGrid.updateRowCount(eventRows.length); |
dojo.debug = console.log; |
}); |
</script> |
</head> |
<body> |
<h3>dojox.Grid Event Tracking</h3> |
<div id="eventGrid" autoWidth="true" autoHeight="true" structure="eventLayout" dojoType="dojox.VirtualGrid"></div> |
<div id="grid" rowCount="100" dojoType="dojox.VirtualGrid"></div> |
</body> |
</html> |