Page MenuHomeCode
Files F945354

demo_LazyLoad.html
No OneTemporary
Actions

demo_LazyLoad.html
View Options

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

File Metadata

Mime Type
text/html
Expires
Sat, Apr 26, 02:01 (4 d, 18 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
23252
Default Alt Text
demo_LazyLoad.html (2 KB)

Event Timeline