149 lines
4.8 KiB
HTML
149 lines
4.8 KiB
HTML
|
<!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>
|