dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
85 lines (80 loc) • 2.97 kB
HTML
<html>
<head>
<title>dojox.grid.Grid - Image Search Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style>
@import "../resources/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"
data-dojo-config="debugAtAllCosts: false, isDebug:false, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.io.script");
dojo.require("dojox.rpc.Service");
dojo.require("dojox.data.ServiceStore");
dojo.require("dojo.parser");
</script>
<script type="text/javascript" src="yahooSearch.js"></script>
<script type="text/javascript">
var service = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc.SMDLibrary", "yahoo.smd"));
var store = new YahooStore({ service: service.imageSearch });
// 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,
width: 'auto',
cells: [
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage }
]
};
// execute search
doSearch = function() {
var value = dojo.byId("searchInput").value;
grid.filter({ query: value }, true);
}
dojo.addOnLoad(function(){
dojo.query("#searchInput").onkeypress(function(e){
if(e.keyCode == dojo.keys.ENTER){ doSearch(); }
});
});
</script>
</head>
<body>
<h3>dojox.grid.Grid - Image Search Test</h3>
<input id="searchInput" type="text" value="apple">
<button onclick="doSearch()" style="clear: both;">Search</button>
<div dojoType="dojox.grid.DataGrid"
id="grid" data-dojo-id="grid" class="grid" structure="imageLayout"
store="store" elasticView="1" query="{ query: 'apple' }"
rowSelector="20px">
</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>
</body>
</html>