diff options
Diffstat (limited to 'includes/js/dojox/data/demos/demo_LazyLoad.html')
| -rw-r--r-- | includes/js/dojox/data/demos/demo_LazyLoad.html | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/includes/js/dojox/data/demos/demo_LazyLoad.html b/includes/js/dojox/data/demos/demo_LazyLoad.html new file mode 100644 index 0000000..358ce84 --- /dev/null +++ b/includes/js/dojox/data/demos/demo_LazyLoad.html @@ -0,0 +1,66 @@ +<!-- + This file is a simple loader for the Lazy Load demo of a Datastore. In this + Example, a simple extension of ItemFileReadStore that can do rudimentary lazy-loading + of items into the store is used to showcase how Datastores can hide how data + is loaded from the widget. As long as the widget implements to the Dojo.data API + spec, then it should be able to use most datastores as input sources for its + values. +--> +<html> +<head> + <title>Demo of Lazy Loading Datastore</title> + <style type="text/css"> + + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true, usePlainJson: true"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.data.demos.stores.LazyLoadJSIStore"); + dojo.require("dijit.Tree"); + </script> +</head> + +<body class="tundra"> + <h1> + DEMO: Lazy Loading Datastore used by dijit.Tree + </h1> + <hr> + <h3> + Description: + </h3> + <p> + This simple demo shows how the dijit.Tree widget can work with a Datastore that does lazy-loading of values into the tree. + In this demo, the Datastore is an extension of ItemFileReadStore that overrides the <i>isItemLoaded()</i> and <i>loadItem()</i> functions of + 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 + is required. In this demo, the real data is required when one of the tree nodes is expanded. + </p> + <p> + 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 + 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 + 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 + loaded but have been requested to be expanded into view. It has no knowledge of how the store actually goes and gets the data. + </p> + + <blockquote> + + <!-- + The store instance used by this demo. + --> + <div dojoType="dojox.data.demos.stores.LazyLoadJSIStore" jsId="continentStore" + url="geography/root.json"></div> + + <!-- + Display the toplevel tree with items that have an attribute of 'type', + with value of 'contintent' + --> + <b>Continents</b> + <div dojoType="dijit.Tree" id=tree label="Continents" store="continentStore" query="{type:'continent'}" + labelAttr="name" typeAttr="type"></div> + </blockquote> + +</body> +</html> |