Skip to content
Newer
Older
100644 147 lines (107 sloc) 5.27 KB
fcc4fff @phiggins42 monster commit from moinconverter, which is always done prior to the …
phiggins42 authored Nov 20, 2011
1 .. _dijit/tree/ForestStoreModel:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
2
f89feb8 @wkeese regex change of level 1 headers to ====\nTEXT\n==== and level 2 heade…
wkeese authored Nov 28, 2011
3 ===========================
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 28, 2012
4 dijit/tree/ForestStoreModel
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
5 ===========================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
6
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
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 Nov 20, 2011
8
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Nov 20, 2011
10
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Nov 20, 2011
13
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Nov 20, 2011
15
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
16 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
17
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored Jan 12, 2012
18 <div data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-id="continentStore"
20e865a @wkeese tabs --> spaces
wkeese authored Dec 14, 2011
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 Jan 12, 2012
20 <div data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-id="continentModel"
20e865a @wkeese tabs --> spaces
wkeese authored Dec 14, 2011
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 Nov 20, 2011
23
24
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
25 A few things to note here:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
26
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Nov 20, 2011
29
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
30 Monitoring changes to items
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored Dec 15, 2011
31 ===========================
48e6bb0 @wkeese break long lines
wkeese authored Dec 6, 2011
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 Nov 20, 2011
34
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Nov 20, 2011
37
48e6bb0 @wkeese break long lines
wkeese authored Dec 6, 2011
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 Nov 20, 2011
40
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
41 For example:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
42
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
43 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
44
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
45 var model = new ForestStoreModel({
20e865a @wkeese tabs --> spaces
wkeese authored Dec 14, 2011
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 Nov 20, 2011
56
57
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
58 Moving items to/from the root node
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored Dec 15, 2011
59 ==================================
48e6bb0 @wkeese break long lines
wkeese authored Dec 6, 2011
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 Nov 20, 2011
64
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
65 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
66
67f7d9e @wkeese Fix spacing for braces, function(), if(), while(), for(), else, etc. …
wkeese authored Dec 1, 2011
67 onAddToRoot: function(/*item*/ item){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Dec 1, 2011
75 onLeaveRoot: function(/*item*/ item){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
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 Dec 15, 2011
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 Mar 1, 2013
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 Dec 15, 2011
100 });
f2aa0fb @wkeese dijit/tree: dojo/ready --> dojo/domReady! in code examples
wkeese authored Mar 1, 2013
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 Jan 29, 2012
114 });
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored Dec 15, 2011
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 Jan 29, 2012
130 require(["dojo/parser", "dojo/data/ItemFileReadStore", "dijit/Tree"]);
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored Dec 15, 2011
131
132 .. html ::
133
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored Jan 12, 2012
134 <div data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-id="continentStore"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
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 Jan 12, 2012
136 <div data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-id="continentModel"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
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 Dec 15, 2011
139
ca34477 @wkeese Convert dijit/ to use new data-dojo-type syntax, with MID's.
wkeese authored Jan 12, 2012
140 <div data-dojo-type="dijit/Tree" id="mytree"
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
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 Dec 15, 2011
144 +", population=" + continentStore.getValue(item, "population"));
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored Jan 29, 2012
145 </script>
a21f591 @wkeese Convert example in Tree.rst to use ObjectStoreModel rather than Fores…
wkeese authored Dec 15, 2011
146 </div>
Something went wrong with that request. Please try again.