| <!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> |
| |
| |
