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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>dojox.Grid - Image Search Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style>
@import "../_grid/Grid.css";
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.grid {
height: 30em;
width: 51em;
border: 1px solid silver;
}
#info { width: 700px; }
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="debugAtAllCosts: false, isDebug:false, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojo.parser");
</script>
<script type="text/javascript" src="yahooSearch.js"></script>
<script type="text/javascript">
// model fields
imageFields = [
{ name: 'Title', na: '' },
{ name: 'Thumbnail', na: ''},
{ name: 'Summary', na: '' },
{ name: 'Url', na: '' },
{ name: 'FileSize', na: ''},
{ name: 'Height', na: ''},
{ name: 'Width', na: ''}
];
// create data model
var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
model.url = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch';
model.observer(this);
// report some model send/receive status
model.onSend = function(inParams){
dojo.byId('sendInfo').innerHTML = dojo.string.substitute(
'Request rows ${0} to ${1}.  ',
[inParams.start, inParams.start + inParams.results -1]
);
}
model.onReceive = function(inData) {
dojo.byId('receiveInfo').innerHTML = dojo.string.substitute(
'Receive rows ${0} to ${1}.  ',
[
inData.firstResultPosition,
inData.firstResultPosition + inData.totalResultsReturned-1
]
);
}
// Define grid structure
// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
beforeImageRow = function(inRowIndex, inSubRows){
inSubRows[0].hidden = (inRowIndex == -1);
}
var imageLayout = [
{ onBeforeRow: beforeImageRow,
cells: [
[ { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage }
]
]}
];
// Create grid subclass to function as we need to display images only.
// adds indirection between model row and grid row.
dojo.declare("dojox.ImageGrid", dojox.Grid, {
postCreate: function() {
this.inherited(arguments);
this.modelDatumChange = this.modelRowChange;
this.colCount = this.layout.cells.length;
},
getDataRowIndex: function(inCell, inRowIndex) {
var r = inCell.index + Math.floor(inRowIndex * this.colCount);
return r;
},
// called in cell context
get: function(inRowIndex) {
var r = this.grid.getDataRowIndex(this, inRowIndex);
return dojox.Grid.prototype.get.call(this, r);
},
modelAllChange: function(){
this.rowCount = Math.ceil(this.model.getRowCount() / this.colCount);
this.updateRowCount(this.rowCount);
},
modelRowChange: function(inData, inRowIndex) {
if(
(inRowIndex % this.colCount == this.colCount - 1)||
(inRowIndex == this.model.count - 1)
){
this.updateRow(Math.floor(inRowIndex / this.colCount));
}
}
});
getCellData = function(inCell, inRowIndex, inField) {
var m = inCell.grid.model, r = inCell.grid.getDataRowIndex(inCell, inRowIndex);
return m.getDatum(r, inField);
}
// execute search
doSearch = function(){
model.clearData();
model.setRowCount(0);
grid.render();
grid.resize();
model.requestRows();
}
dojo.addOnLoad(function(){
dojo.query("#searchInput").onkeypress(function(e){
if(e.keyCode == dojo.keys.ENTER){ doSearch(); }
});
doSearch();
});
</script>
</head>
<body>
<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Image Search Test</div>
<input id="searchInput" type="text" value="apple">
<button onclick="doSearch()" style="clear: both;">Search</button>
<div jsId="grid" class="grid" structure="imageLayout" dojoType="dojox.ImageGrid" model="model"></div>
<br>
<div id="info">
<div id="rowCount" style="float: left"></div>
<div style="float: right">
<div id="sendInfo" style="text-align: right"></div>
<div id="receiveInfo" style="text-align: right"></div>
</div>
</div>
<br /><br />
<p>Note: requires PHP for proxy.</p>
</body>
</html>
|
