+++ /dev/null
-<!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>
projects / eow / blobdiff