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.
76 lines (64 loc) • 2.68 kB
HTML
<html>
<head>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/themes/tundra/tundra_rtl.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dojox/grid/resources/tundraGrid.css";
</style>
<title>Google Search Store with Grid</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../dijit/dijit.js"></script>
<script type="text/javascript" src="../GoogleSearchStore.js"></script>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dojox.wire.ml.Invocation");
dojo.require("dojox.wire.ml.Transfer");
dojo.require("dojox.wire.ml.Action");
dojo.require("dojox.data.GoogleSearchStore");
var ImageSearch;
dojo.ready(function(){
ImageSearch = { layout:[], store:{}, grid:{}, }
ImageSearch.format = function(value, row) {
return "<img src=\"" + value + "\" alt=\"" + ImageSearch.grid.getItem(row).title + "\" style=\"height:80px; width:auto; margin:auto;\">";
}
ImageSearch.layout = [
[
{ name: "Title", field: "title", width: 20 },
{ name: "Summary", field: "content", width: 20 },
{ name: "URL", field: "url", width: "auto", formatter: ImageSearch.format }
]
];
ImageSearch.store = new dojox.data.GoogleImageSearchStore();
ImageSearch.grid = new dojox.grid.DataGrid({
store: ImageSearch.store,
structure: ImageSearch.layout,
query: { text: 'cat' },
style: "width: 720px; height: 500px;",
rowsPerPage: 20,
escapeHTMLInData: false
}, "googleGrid");
ImageSearch.grid.startup();
});
var newQuery = {text: 'cat' };
</script>
</head>
<body class="tundra" style="margin:20px;">
<h1>dojox.data.GoogleImageSearchStore:</h1>
<i>Displays a list of results from a google image search.</i><br>
<div dojoType="dijit.form.TextBox" id="searchText" value="cat"></div>
<button dojoType="dijit.form.Button" id="searchButton">Search</button>
<br>
<br>
<div id="googleGrid"></div>
<div dojoType="dojox.wire.ml.Action" trigger="searchButton" triggerEvent="onClick">
<div dojoType="dojox.wire.ml.Transfer" source="searchText.value" target="newQuery.text"></div>
<div dojoType="dojox.wire.ml.Invocation" object="ImageSearch.grid" method="setQuery" parameters="newQuery"></div>
</div>
</body>
</html>