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, 0 insertions, 291 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 deleted file mode 100644 index 46554e3..0000000 --- a/includes/js/dojox/grid/tests/test_dojo_data_model_multiStores.html +++ /dev/null @@ -1,291 +0,0 @@ -<!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> - - |