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