diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/grid/tests/test_events.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/grid/tests/test_events.html')
| -rw-r--r-- | includes/js/dojox/grid/tests/test_events.html | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_events.html b/includes/js/dojox/grid/tests/test_events.html new file mode 100644 index 0000000..8ea61a4 --- /dev/null +++ b/includes/js/dojox/grid/tests/test_events.html @@ -0,0 +1,174 @@ +<!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("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: 'onCellMouseDown' }, + { name: 'onRowMouseOver' }, + { name: 'onRowMouseOut' }, + { name: 'onRowMouseDown' }, + { name: 'onHeaderCellClick' }, + { name: 'onHeaderClick', properties: ['rowIndex'] }, + { name: 'onHeaderCellDblClick' }, + { name: 'onHeaderDblClick', properties: ['rowIndex'] }, + { name: 'onHeaderCellMouseOver' }, + { name: 'onHeaderCellMouseOut' }, + { name: 'onHeaderCellMouseDown' }, + { 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> |