Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 147 lines (107 sloc) 5.397 kb
fcc4fff Peter E Higgins monster commit from moinconverter, which is always done prior to the svn...
phiggins42 authored
1 .. _dijit/tree/ForestStoreModel:
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
2
f89feb8 Bill Keese regex change of level 1 headers to ====\nTEXT\n==== and level 2 headers ...
wkeese authored
3 ===========================
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
4 dijit/tree/ForestStoreModel
9dd52dc Peter E Higgins mondo whitespace change
phiggins42 authored
5 ===========================
d608cc5 Peter E Higgins \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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
8
9dd52dc Peter E Higgins 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
10
9dd52dc Peter E Higgins 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
13
9dd52dc Peter E Higgins 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
15
c49c87d Peter E Higgins normalization
phiggins42 authored
16 .. html ::
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
17
ca34477 Bill Keese 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 Bill Keese tabs --> spaces
wkeese authored
19 data-dojo-props="url:'_data/countries.json'"></div>
ca34477 Bill Keese 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 Bill Keese tabs --> spaces
wkeese authored
21 data-dojo-props="store:continentStore, query:{type:'continent'},
22 rootId:'continentRoot', rootLabel:'Continents', childrenAttrs:'children'"></div>
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
23
24
9dd52dc Peter E Higgins mondo whitespace change
phiggins42 authored
25 A few things to note here:
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
26
9dd52dc Peter E Higgins 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
29
9dd52dc Peter E Higgins mondo whitespace change
phiggins42 authored
30 Monitoring changes to items
a21f591 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
31 ===========================
48e6bb0 Bill Keese 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
34
9dd52dc Peter E Higgins 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
37
48e6bb0 Bill Keese 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
40
9dd52dc Peter E Higgins mondo whitespace change
phiggins42 authored
41 For example:
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
42
c49c87d Peter E Higgins normalization
phiggins42 authored
43 .. js ::
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
44
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
45 var model = new ForestStoreModel({
20e865a Bill Keese 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
56
57
9dd52dc Peter E Higgins mondo whitespace change
phiggins42 authored
58 Moving items to/from the root node
a21f591 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
59 ==================================
48e6bb0 Bill Keese 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 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
64
c49c87d Peter E Higgins normalization
phiggins42 authored
65 .. js ::
d608cc5 Peter E Higgins \r\n -> \n conversion.
phiggins42 authored
66
67f7d9e Bill Keese Fix spacing for braces, function(), if(), while(), for(), else, etc. to ...
wkeese authored
67 onAddToRoot: function(/*item*/ item){
9dd52dc Peter E Higgins 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 Bill Keese Fix spacing for braces, function(), if(), while(), for(), else, etc. to ...
wkeese authored
75 onLeaveRoot: function(/*item*/ item){
9dd52dc Peter E Higgins 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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
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 Bill Keese 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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
100 });
f2aa0fb Bill Keese 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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
131
132 .. html ::
133
ca34477 Bill Keese 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 Bill Keese 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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
139
ca34477 Bill Keese 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 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
144 +", population=" + continentStore.getValue(item, "population"));
3ed69e1 dijit/tree/ForestStoreModel AMD
maastermedia authored
145 </script>
a21f591 Bill Keese Convert example in Tree.rst to use ObjectStoreModel rather than ForestSt...
wkeese authored
146 </div>
Something went wrong with that request. Please try again.