Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 147 lines (107 sloc) 5.397 kb
fcc4fff @phiggins42 monster commit from moinconverter, which is always done prior to the …
phiggins42 authored
1 .. _dijit/tree/ForestStoreModel:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
2
f89feb8 @wkeese regex change of level 1 headers to ====\nTEXT\n==== and level 2 heade…
wkeese authored
3 ===========================
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
4 dijit/tree/ForestStoreModel
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
5 ===========================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
6
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
7 The ForestStoreModel connects a data store with multiple "root" items to a :ref:`dijit/Tree <dijit/Tree>`.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
8
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
9 An example might be a geographical database; there are multiple continents but no ''single'' top level item called "world".
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
10
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
11 Since Tree demands a single top level item, ForestStoreModel creates a fake item whose children are determined
12 by a query specified to the ForestStoreModel constructor.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
13
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
14 Here's an example of a declarative initialization for a TreeStoreModel and for the data store that it connects to:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
15
c49c87d @phiggins42 normalization
phiggins42 authored
16 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
17
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored
18 <div data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-id="continentStore"
20e865a @wkeese tabs --> spaces
wkeese authored
19 data-dojo-props="url:'_data/countries.json'"></div>
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored
20 <div data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-id="continentModel"
20e865a @wkeese tabs --> spaces
wkeese authored
21 data-dojo-props="store:continentStore, query:{type:'continent'},
22 rootId:'continentRoot', rootLabel:'Continents', childrenAttrs:'children'"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
23
24
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
25 A few things to note here:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
26
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
27 * The query returns multiple items
28 * There's a single fake root item created with the label "The World". The Tree will display that root item unless showRoot=false is specified. (However, even if Tree doesn't display it, it still exists.)
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
29
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
30 Monitoring changes to items
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
31 ===========================
48e6bb0 @wkeese break long lines
wkeese authored
32 Note that ForestStoreModel is inherently complex because it's difficult to tell when the children of the top level (fake) item have changed.
33 For example:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
34
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
35 * a new continent is added to the data store
36 * a new country is added to the data store
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
37
48e6bb0 @wkeese break long lines
wkeese authored
38 ForestStoreModel has no way of knowing that the continent affects the top level node but the country doesn't.
39 The user needs to define the onNewItem() method, or otherwise ForestStoreModel will take the pessimistic inefficient approach.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
40
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
41 For example:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
42
c49c87d @phiggins42 normalization
phiggins42 authored
43 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
44
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
45 var model = new ForestStoreModel({
20e865a @wkeese tabs --> spaces
wkeese authored
46 store: continentStore,
47 query: {type: 'continent'},
48 rootLabel: "The World",
49 onNewItem: function(item, parentInfo){
50 if(this.store.getValue(item, 'type') == 'continent'){
51 this._requeryTop();
52 }
53 this.inherited(arguments);
54 }
55 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
56
57
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
58 Moving items to/from the root node
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
59 ==================================
48e6bb0 @wkeese break long lines
wkeese authored
60 It's also complicated because users need to define what to do when an element is dropped on to the root of the tree, or dragged from the root of the tree and dropped onto a sub-node.
61 You may want to, for example, change the item so that the "topLevel" attribute is set/unset.
62 It depends on the structure of the data store what the appropriate action is.
63 The developer should override onAddToRoot() and onLeaveRoot().
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
64
c49c87d @phiggins42 normalization
phiggins42 authored
65 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
66
67f7d9e @wkeese Fix spacing for braces, function(), if(), while(), for(), else, etc. …
wkeese authored
67 onAddToRoot: function(/*item*/ item){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
68 // summary
69 // Called when item added to root of tree; user must override
70 // to modify the item so that it matches the query for top level items
71 // example
72 // | store.setValue(item, "root", true);
73 console.log(this, ": item ", item, " added to root");
74 },
67f7d9e @wkeese Fix spacing for braces, function(), if(), while(), for(), else, etc. …
wkeese authored
75 onLeaveRoot: function(/*item*/ item){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
76 // summary
77 // Called when item removed from root of tree; user must override
78 // to modify the item so it doesn't match the query for top level items
79 // example
80 // | store.unsetAttribute(item, "root");
81 console.log(this, ": item ", item, " removed from root");
82 }
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
83
84 Examples
85 ========
86
87 A programmatic tree
88 -------------------
89
90 Creating a programmatic tree is very simple:
91
92 .. code-example ::
93
94 .. js ::
95
f2aa0fb @wkeese dijit/tree: dojo/ready --> dojo/domReady! in code examples
wkeese authored
96 require(["dijit/Tree", "dojo/data/ItemFileReadStore", "dijit/tree/ForestStoreModel", "dojo/domReady!"],
97 function(Tree, ItemFileReadStore, ForestStoreModel){
98 var store = new ItemFileReadStore({
99 url: "{{dataUrl}}/dijit/tests/_data/countries.json"
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
100 });
f2aa0fb @wkeese dijit/tree: dojo/ready --> dojo/domReady! in code examples
wkeese authored
101
102 var treeModel = new ForestStoreModel({
103 store: store,
104 query: {"type": "continent"},
105 rootId: "root",
106 rootLabel: "Continents",
107 childrenAttrs: ["children"]
108 });
109
110 var myTree = new Tree({
111 model: treeModel
112 }, "treeOne");
113 myTree.startup();
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
114 });
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
115
116 .. html ::
117
118 <div id="treeOne"></div>
119
120 Note that the childrenAttrs parameter to TreeStoreModel/ForestStoreModel is an array since it can list multiple attributes in the store.
121
122
123 A markup tree
124 -------------
125
126 .. code-example ::
127
128 .. js ::
129
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
130 require(["dojo/parser", "dojo/data/ItemFileReadStore", "dijit/Tree"]);
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
131
132 .. html ::
133
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored
134 <div data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-id="continentStore"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
135 data-dojo-props="url:'{{dataUrl}}/dijit/tests/_data/countries.json'"></div>
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored
136 <div data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-id="continentModel"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
137 data-dojo-props="store:continentStore, query:{type:'continent'},
138 rootId:'continentRoot', rootLabel:'Continents', childrenAttrs:'children'"></div>
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
139
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored
140 <div data-dojo-type="dijit/Tree" id="mytree"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
141 data-dojo-props="model:continentModel, openOnClick:true">
142 <script type="dojo/on" data-dojo-event="click" data-dojo-args="item">
143 alert("Execute of node " + continentStore.getLabel(item)
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
144 +", population=" + continentStore.getValue(item, "population"));
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
145 </script>
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored
146 </div>
Something went wrong with that request. Please try again.