239 lines
7.1 KiB
HTML
239 lines
7.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<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"
|
|
djConfig="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"
|
|
jsId="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"
|
|
jsId="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"
|
|
jsId="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"
|
|
jsId="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"
|
|
jsId="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"
|
|
jsId="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>
|
|
|
|
|