| 1 | <!-- |
|---|
| 2 | This file is a simple loader for the Lazy Load demo of a Datastore. In this |
|---|
| 3 | Example, a simple extension of ItemFileReadStore that can do rudimentary lazy-loading |
|---|
| 4 | of items into the store is used to showcase how Datastores can hide how data |
|---|
| 5 | is loaded from the widget. As long as the widget implements to the Dojo.data API |
|---|
| 6 | spec, then it should be able to use most datastores as input sources for its |
|---|
| 7 | values. |
|---|
| 8 | --> |
|---|
| 9 | <html> |
|---|
| 10 | <head> |
|---|
| 11 | <title>Demo of Lazy Loading Datastore</title> |
|---|
| 12 | <style type="text/css"> |
|---|
| 13 | |
|---|
| 14 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 15 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 16 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 17 | </style> |
|---|
| 18 | |
|---|
| 19 | <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true, usePlainJson: true"></script> |
|---|
| 20 | <script type="text/javascript"> |
|---|
| 21 | dojo.require("dojo.parser"); |
|---|
| 22 | dojo.require("dojox.data.demos.stores.LazyLoadJSIStore"); |
|---|
| 23 | dojo.require("dijit.Tree"); |
|---|
| 24 | </script> |
|---|
| 25 | </head> |
|---|
| 26 | |
|---|
| 27 | <body class="tundra"> |
|---|
| 28 | <h1> |
|---|
| 29 | DEMO: Lazy Loading Datastore used by dijit.Tree |
|---|
| 30 | </h1> |
|---|
| 31 | <hr> |
|---|
| 32 | <h3> |
|---|
| 33 | Description: |
|---|
| 34 | </h3> |
|---|
| 35 | <p> |
|---|
| 36 | This simple demo shows how the dijit.Tree widget can work with a Datastore that does lazy-loading of values into the tree. |
|---|
| 37 | In this demo, the Datastore is an extension of ItemFileReadStore that overrides the <i>isItemLoaded()</i> and <i>loadItem()</i> functions of |
|---|
| 38 | with ones that can detect 'stub' items and use the data in the stub item to load the real data for that item when it |
|---|
| 39 | is required. In this demo, the real data is required when one of the tree nodes is expanded. |
|---|
| 40 | </p> |
|---|
| 41 | <p> |
|---|
| 42 | The key thing to note is that all the lazy-loading logic (how to locate the data from the backend and so forth) is encapsulated |
|---|
| 43 | into the store functions. The dijit.Tree widget only knows about and uses the dojo.data.Read API interfaces to call to the store to |
|---|
| 44 | get items, test if child items are fully loaded or not, and to invoke the <i>loadItem()</i> function on items that are not yet fully |
|---|
| 45 | loaded but have been requested to be expanded into view. It has no knowledge of how the store actually goes and gets the data. |
|---|
| 46 | </p> |
|---|
| 47 | |
|---|
| 48 | <blockquote> |
|---|
| 49 | |
|---|
| 50 | <!-- |
|---|
| 51 | The store instance used by this demo. |
|---|
| 52 | --> |
|---|
| 53 | <div dojoType="dojox.data.demos.stores.LazyLoadJSIStore" jsId="continentStore" |
|---|
| 54 | url="geography/root.json"></div> |
|---|
| 55 | |
|---|
| 56 | <!-- |
|---|
| 57 | Display the toplevel tree with items that have an attribute of 'type', |
|---|
| 58 | with value of 'contintent' |
|---|
| 59 | --> |
|---|
| 60 | <b>Continents</b> |
|---|
| 61 | <div dojoType="dijit.Tree" id=tree label="Continents" store="continentStore" query="{type:'continent'}" |
|---|
| 62 | labelAttr="name" typeAttr="type"></div> |
|---|
| 63 | </blockquote> |
|---|
| 64 | |
|---|
| 65 | </body> |
|---|
| 66 | </html> |
|---|
