--- /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 with Dojo.Data via binding. Multiple Store implementations.</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+ <style type="text/css">
+ @import "../../../dijit/themes/tundra/tundra.css";
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+ @import "../_grid/tundraGrid.css";
+
+ #grid, #grid2, #grid3, #grid4, #grid5, #grid6{
+ width: 65em;
+ height: 25em;
+ padding: 1px;
+ }
+ </style>
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
+ <script type="text/javascript">
+ dojo.require("dojox.grid.Grid");
+ dojo.require("dojo.data.ItemFileReadStore");
+ dojo.require("dojox.data.CsvStore");
+ dojo.require("dojox.data.XmlStore");
+ dojo.require("dojox.data.FlickrStore");
+ dojo.require("dojox.data.OpmlStore");
+ dojo.require("dojox.data.HtmlStore");
+ dojo.require("dojo.parser");
+ </script>
+
+ <script type="text/javascript">
+ function getRow(inRowIndex){
+ return ' ' + inRowIndex;
+ }
+
+ var formatHref = function(attribute, rowIndex) {
+ model = dataModel4;
+ if(!model)
+ return "?";
+ var value = model.getRow(rowIndex);
+ if(value && value[attribute])
+ return "<a href=\"" + value[attribute] + "\" target=\"_blank\">Image Link</a>";
+ return "";
+ }
+
+ var layoutMovies = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { field: "Title", width: 'auto' },
+ { field: "Year", width: 5 },
+ { field: "Producer", width: 20 }
+ ]]}
+ ];
+
+ var layoutCountries = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { field: 0, width: 'auto' },
+ { width: 8 }
+ ]]}
+ ];
+
+ var layoutBooks = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { field: "title", width: 'auto' },
+ { field: "isbn", width: '8' }
+ ]]}
+ ];
+
+ //Lay out the Flickr data so one column is a URL. This makes use of the
+ //get function of a cell.
+ var layoutFlickrData = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { name: "Title", field: "title", width: 'auto' },
+ { name: "Image URL", field: "imageUrl", width: '15', get: dojo.partial(formatHref, "imageUrl")}
+ ]]}
+ ];
+
+ var layoutOpmlData = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { name: 'Name', field: 'text', width: 'auto'},
+ { name: 'Type', field: 'type', width: '8' }
+ ]]}
+ ];
+
+ var layoutHtmlTable = [
+ // view 0
+ { type: 'dojox.GridRowView', width: '20px' },
+ // view 1
+ { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
+ // view 2
+ { cells: [[
+ { name: 'Column 1', field: 'Column 1', width: 'auto'},
+ { name: 'Column 2', field: 'Column 2', width: 'auto'},
+ { name: 'Column 3', field: 'Column 3', width: 'auto'},
+ { name: 'Column 4', field: 'Column 4', width: 'auto'}
+ ]]}
+ ];
+ </script>
+</head>
+<body class="tundra">
+ <h1>dojox.Grid using Dojo.Data stores via simple binding with multiple store implementations.</h1>
+ <p>
+ This page demonstrates the Grid can display data accessed by dojo.data implementing Datastores.
+ Each of the datastores used stores data in a different format, and as this test and demonstration
+ page shows, the logic for rendering the data is virtually identical. You define your source store,
+ you define the model for accessing the data, which is ij this case the dojox.grid.data.DojoData model
+ and then you define the layout, which maps the data attribute names to columns in the grid. You can
+ even perform cusomization of what is displayed, as demonstrated in the dojox.data.FlickrStore layout.
+ The image url is displayed as a clickable link that opens a new page.
+ </p>
+ <p>
+ The choice of stores used were ones that did not require back end services to function for sake of
+ simplicity. There is no reason that dojox.data.QueryReadStore could not be used with grid as well,
+ it just requires a back end service to send it the query results.
+ </p>
+ <p><b>Stores used:</b></p>
+ <ul>
+ <li>dojo.data.ItemFileReadStore</li>
+ <li>dojox.data.CvsStore</li>
+ <li>dojox.data.XmlStore</li>
+ <li>dojox.data.FlickrStore</li>
+ <li>dojox.data.OpmlStore</li>
+ <li>dojox.data.HtmlTableStore</li>
+ </ul>
+
+ <h2>dojo.data.ItemFileReadStore:</h2>
+ <i>Displays a list of countries through ItemFileReadStore format.</i>
+ <span dojoType="dojo.data.ItemFileReadStore"
+ jsId="jsonStore" url="../../../dijit/tests/_data/countries.json">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel"
+ rowsPerPage="20"
+ store="jsonStore"
+ query="{ name : '*' }">
+ </span>
+ <div id="grid" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel" structure="layoutCountries">
+ </div>
+
+
+ <h2>dojox.data.CsvStore:</h2>
+ <i>Displays a list of movies that were stored in CSV format.</i>
+ <span dojoType="dojox.data.CsvStore"
+ jsId="csvStore" url="support/movies.csv">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel2"
+ store="csvStore"
+ rowsPerPage="5"
+ query="{ Title: '*' }"
+ clientSort="true">
+ </span>
+ <div id="grid2" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel2" structure="layoutMovies">
+
+ </div>
+
+ <h2>dojox.data.XmlStore:</h2>
+ <i>Displays a list of books that were stored in XML format.</i>
+ <span dojoType="dojox.data.XmlStore"
+ jsId="xmlStore" url="support/books.xml">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel3"
+ rowsPerPage="5"
+ store="xmlStore"
+ query="{ title : '*' }">
+ </span>
+ <div id="grid3" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel3" structure="layoutBooks">
+ </div>
+
+
+ <h2>dojox.data.FlickrStore:</h2>
+ <i>Displays Flickr imformation on 3DNY (Dojo Developer Days, New York) from the flickr public photo feed, accessed via the FlickrStore dojo.data implementation.</i>
+ <span dojoType="dojox.data.FlickrStore"
+ jsId="flickrStore">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel4"
+ rowsPerPage="5"
+ store="flickrStore"
+ query="{ tags : '3dny' }">
+ </span>
+ <div id="grid4" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel4" structure="layoutFlickrData">
+ </div>
+
+
+ <h2>dojox.data.OpmlStore:</h2>
+ <i>Scans an Opml based document for all items of type 'country'</i>
+ <span dojoType="dojox.data.OpmlStore"
+ jsId="opmlStore" url="support/geography.xml">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel5"
+ rowsPerPage="5"
+ store="opmlStore"
+ query="{ type : 'country' }"
+ queryOptions="{deep: true}"
+ sortFields="[ { attribute : 'text' } ]">
+ </span>
+ <div id="grid5" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel5" structure="layoutOpmlData">
+ </div>
+
+
+ <h2>dojox.data.HtmlStore:</h2>
+ <i>Loads the grid from an HTML Table.</i>
+ <span dojoType="dojox.data.HtmlStore"
+ jsId="htmlStore" dataId="tableExample">
+ </span>
+ <span dojoType="dojox.grid.data.DojoData"
+ jsId="dataModel6"
+ rowsPerPage="5"
+ store="htmlStore"
+ query="{}">
+ </span>
+ <div id="grid6" dojoType="dojox.Grid" elasticView="2"
+ model="dataModel6" structure="layoutHtmlTable">
+ </div>
+
+ <!--
+ Inline data table to be displayed bu the grid!
+ This is accessed via the dojox.data.HtmlTableStore
+ -->
+ <table id="tableExample" style="display: none;">
+ <thead>
+ <tr>
+ <th>Column 1</th>
+ <th>Column 2</th>
+ <th>Column 3</th>
+ <th>Column 4</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>This</td>
+ <td>is</td>
+ <td></td>
+ <td>empty in column 3</td>
+ </tr>
+ <tr>
+ <td>This</td>
+ <td>is</td>
+ <td>a</td>
+ <td>value</td>
+ </tr>
+ <tr>
+ <td>Who?</td>
+ <td>What?</td>
+ <td>When?</td>
+ <td>Where?</td>
+ </tr>
+ <tr>
+ <td>She</td>
+ <td>sells</td>
+ <td>sea</td>
+ <td>shells</td>
+ </tr>
+ </tbody>
+ </table>
+</body>
+</html>
+
+
projects / eow / blobdiff