Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!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>