1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test dojox.Grid Basic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "../_grid/Grid.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
#grid {
border: 1px solid #333;
width: 35em;
height: 30em;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dijit.Tooltip");
dojo.require("dijit.Menu");
dojo.require("dijit.ColorPalette");
dojo.require("dojo.parser");
</script>
<script type="text/javascript" src="support/test_data.js"></script>
<script type="text/javascript">
// a grid view is a group of columns
var view1 = {
cells: [[
{name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'}, {name: 'Column 3', width: "150px"}, {name: 'Column 4'}
],[
{name: 'Column 5'}, {name: 'Column 6'}, {name: 'Column 7'}, {name: 'Column 8', field: 3, colSpan: 2}
]]
};
// a grid layout is an array of views.
var layout = [ view1 ];
dojo.addOnLoad(function() {
window["grid"] = dijit.byId("grid");
var
showTooltip = function(e) {
if(gridTooltipEnabled){
var msg = "This is cell " + e.rowIndex + ", " + e.cellIndex;
dijit.showTooltip(msg, e.cellNode);
}
},
hideTooltip = function(e) {
dijit.hideTooltip(e.cellNode);
// FIXME: make sure that pesky tooltip doesn't reappear!
// would be nice if there were a way to hide tooltip without regard to aroundNode.
dijit._masterTT._onDeck=null;
}
// cell tooltip
dojo.connect(grid, "onCellMouseOver", showTooltip);
dojo.connect(grid, "onCellMouseOut", hideTooltip);
// header cell tooltip
dojo.connect(grid, "onHeaderCellMouseOver", showTooltip);
dojo.connect(grid, "onHeaderCellMouseOut", hideTooltip);
// grid menu
window["gridMenu"] = dijit.byId("gridMenu");
gridMenu.bindDomNode(grid.domNode);
// prevent grid methods from killing the context menu event by implementing our own handler
grid.onCellContextMenu = function(e) {
cellNode = e.cellNode;
};
grid.onHeaderContextMenu = function(e) {
cellNode = e.cellNode;
};
});
function reportCell() {
if(cellNode){
alert("Cell contents: " + cellNode.innerHTML);
cellNode = null;
}
}
gridTooltipEnabled = true;
function toggleTooltip(button){
gridTooltipEnabled = !gridTooltipEnabled;
button.value = gridTooltipEnabled ? "Disable Grid Tooltip" : "Enable Grid Tooltip";
}
gridMenuEnabled = true;
function toggleMenu(button){
gridMenuEnabled = !gridMenuEnabled;
button.value = gridMenuEnabled ? "Disable Grid Menu" : "Enable Grid Menu";
gridMenu[gridMenuEnabled ? "bindDomNode" : "unBindDomNode"](grid.domNode);
}
</script>
</head>
<body>
<div dojoType="dijit.Menu" id="gridMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="reportCell">See cell text...</div>
<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>
</div>
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>
<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu2">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
<div dojoType="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<div dojoType="dijit.Menu" id="submenu4"">
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem" disabled="true">
<span>Disabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit.ColorPalette"></div>
</div>
</div>
<div class="heading">dojox.Grid Basic Test</div>
<p>
<input type="button" onclick="toggleTooltip(this)" value="Disable Grid Tooltip">
<input type="button" onclick="toggleMenu(this)" value="Disable Grid Menu"> <br />
Note: when the grid menu is disabled, the document's dijit context menu should be shown over the grid.
</p>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
|
