/
common_cases.html
128 lines (122 loc) · 3.52 KB
/
common_cases.html
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
<!DOCTYPE html>
<html>
<head>
<title>Test Grid Common Cases</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=570" />
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../css/dgrid.css";
@import "../css/skins/claro.css";
h2 {
font-weight: bold;
padding-bottom: 0.25em;
clear: both;
}
#grid {
width: 70%;
}
#grid .field-col1 {
width: 100px;
}
#grid .field-col2 {
width: 30%;
}
#grid .field-col4 {
width: 180px;
}
#scrollgrid {
width: 50%;
}
#scrollgrid .dgrid-cell {
width: 100px; /* force all columns to have SOME width */
}
#scrollgrid .field-col1 {
width: 500px;
}
#scrollgrid .field-col4 {
width: 300px;
}
#tree {
width: 700px;
height: 200px;
float:left;
}
#tree .field-bool {
width: 20%;
}
#tree .field-type {
width: 80px;
}
#list{
width: 300px;
float: left;
}
.dgrid {
margin: 10px;
}
</style>
<script>
var start= new Date().getTime();
</script>
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojo/on", "dgrid/List", "dgrid/OnDemandGrid", "dgrid/tree", "dgrid/editor", "dgrid/Selection", "dgrid/Keyboard", "dgrid/test/data/base", "dojo/_base/declare", "dojo/_base/array", "dojo/domReady!"],
function(on, List, Grid, tree, editor, Selection, Keyboard, testStore, declare, arrayUtil){
console.log("loaded in " + (new Date().getTime() - start));
var StandardGrid = declare([Grid, Selection, Keyboard]);
function getColumns(){
return { // you can declare columns as an object hash (key translates to field)
col1: editor({label: 'Column 1 column 1 column 1'}, "text", "dblclick"),
col2: {label: 'Column 2', sortable: false},
col3: editor({label: 'Column 3'}, "text", "dblclick"),
col4: 'Column444444444444444444',
col5: editor({label: 'Column 5'}, "text", "dblclick")
};
}
window.grid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "grid");
window.scrollgrid = new StandardGrid({
store: testStore,
columns: getColumns()
}, "scrollgrid");
window.tree = new StandardGrid({
tabIndex: 2,
store: testCountryStore,
query: {type: "continent"},
selectionMode: "single",
columns: {
name: tree({label:'Name', sortable: false}),
bool: editor({label: 'A CheckBox', sortable: false}, "checkbox"),
type: {label: 'Type', sortable: false},
population: 'Population',
timezone: 'Timezone'
}
}, "tree");
window.list = new (declare([List, Selection, Keyboard]))({
tabIndex: 1
}, "list");
list.renderArray(arrayUtil.map(testCountryStore.data, function(country){
return country.name;
}));
on(document.getElementById("save"), "click", function(){
grid.save();
});
});
</script>
</head>
<body class="claro">
<h2>A basic grid (70% of page width)</h2>
<div id="grid"></div>
<button id="save">Save</button>
<h2>A grid with tree column and then a simple list (floated left)</h2>
<div id="tree"></div>
<div id="list"></div>
<h2>Same as basic grid, but with column widths exceeding grid width</h2>
<p>(for testing that nodes occupy correct widths - pay attention to hover/selection style)</p>
<div id="scrollgrid"></div>
</body>
</html>