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.
239 lines (217 loc) • 7.07 kB
HTML
<html>
<head>
<title>dojox.grid.DataGrid using 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 "../resources/Grid.css";
@import "../resources/tundraGrid.css";
#grid, #grid2, #grid3, #grid4, #grid5, #grid6{
width: 65em;
height: 25em;
padding: 1px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
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">
var formatHref = function(value, rowIndex) {
return "<a href=\"" + value + "\" target=\"_blank\">Image Link</a>";
}
var rowView = { cells: [ new dojox.grid.cells.RowIndex({ width: 5 }) ], noscroll: true };
var layoutMovies = [
// view 1
rowView,
// view 2
[
{ field: "Title", width: 'auto' },
{ field: "Year", width: 5 },
{ field: "Producer", width: 20 }
]
];
var layoutCountries = [
// view 1
rowView,
// view 2
[
{ field: 'name', width: 'auto' },
{ field: 'type', width: 8 }
]
];
var layoutBooks = [
// view 1
rowView,
// view 2
[
{ 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 1
rowView,
// view 2
[
{ name: "Title", field: "title", width: 'auto' },
{ name: "Image URL", field: "imageUrl", width: '15', formatter: formatHref}
]
];
var layoutOpmlData = [
// view 1
rowView,
// view 2
[
{ name: 'Name', field: 'text', width: 'auto'},
{ name: 'Type', field: 'type', width: '8' }
]
];
var layoutHtmlTable = [
// view 1
rowView,
// view 2
[
{ 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.DataGrid using 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 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.CsvStore</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"
data-dojo-id="jsonStore" url="../../../dijit/tests/_data/countries.json">
</span>
<div id="grid" dojoType="dojox.grid.DataGrid" elasticView="2" query="{ name: '*' }" rowsPerPage="20"
store="jsonStore" structure="layoutCountries" rowSelector="20px">
</div>
<h2>dojox.data.CsvStore:</h2>
<i>Displays a list of movies that were stored in CSV format.</i>
<span dojoType="dojox.data.CsvStore"
data-dojo-id="csvStore" url="support/movies.csv">
</span>
<div id="grid2" dojoType="dojox.grid.DataGrid" elasticView="2" query="{ Title: '*' }" rowsPerPage="5"
store="csvStore" structure="layoutMovies" rowSelector="20px">
</div>
<h2>dojox.data.XmlStore:</h2>
<i>Displays a list of books that were stored in XML format.</i>
<span dojoType="dojox.data.XmlStore"
data-dojo-id="xmlStore" url="support/books.xml">
</span>
<div id="grid3" dojoType="dojox.grid.DataGrid" elasticView="2" query="{ title: '*' }" rowsPerPage="5"
store="xmlStore" structure="layoutBooks" rowSelector="20px">
</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"
data-dojo-id="flickrStore">
</span>
<div id="grid4" dojoType="dojox.grid.DataGrid" elasticView="2" query="{ tags: '3dny' }"
rowsPerPage="5"
store="flickrStore" structure="layoutFlickrData" rowSelector="20px">
</div>
<h2>dojox.data.OpmlStore:</h2>
<i>Scans an Opml based document for all items of type 'country'</i>
<span dojoType="dojox.data.OpmlStore"
data-dojo-id="opmlStore" url="support/geography.xml">
</span>
<div id="grid5" dojoType="dojox.grid.DataGrid" elasticView="2" query="{ type: 'country' }"
queryOptions="{ deep: true }" rowsPerPage="5"
store="opmlStore" structure="layoutOpmlData" rowSelector="20px">
</div>
<h2>dojox.data.HtmlStore:</h2>
<i>Loads the grid from an HTML Table.</i>
<!--
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>
<span dojoType="dojox.data.HtmlStore"
data-dojo-id="htmlStore" dataId="tableExample">
</span>
<div id="grid6" dojoType="dojox.grid.DataGrid" elasticView="2" query="{}"
store="htmlStore" rowsPerPage="5" structure="layoutHtmlTable" rowSelector="20px">
</div>
</body>
</html>