aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dojox/data/demos/demo_LazyLoad.html
blob: 358ce84c6c1468e51c9548d8a7da9c1e81292714 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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>