diff options
Diffstat (limited to 'includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html')
| -rw-r--r-- | includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html | 291 |
1 files changed, 291 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html b/includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html new file mode 100644 index 0000000..46554e3 --- /dev/null +++ b/includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html @@ -0,0 +1,291 @@ +<!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> + + |