git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/data/demos/demo_LazyLoad.html

   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>