+++ /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