+++ /dev/null
-<!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>
projects / eow / blobdiff