Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Tree.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-data-Tree'>/**
19 </span> * @class Ext.data.Tree
20  *
21  * This class is used as a container for a series of nodes. The nodes themselves maintain
22  * the relationship between parent/child. The tree itself acts as a manager. It gives functionality
23  * to retrieve a node by its identifier: {@link #getNodeById}.
24  *
25  * The tree also relays events from any of it's child nodes, allowing them to be handled in a
26  * centralized fashion. In general this class is not used directly, rather used internally
27  * by other parts of the framework.
28  *
29  */
30 Ext.define('Ext.data.Tree', {
31     alias: 'data.tree',
32
33     mixins: {
34         observable: &quot;Ext.util.Observable&quot;
35     },
36
37 <span id='Ext-data-Tree-property-root'>    /**
38 </span>     * @property {Ext.data.NodeInterface}
39      * The root node for this tree
40      */
41     root: null,
42
43 <span id='Ext-data-Tree-method-constructor'>    /**
44 </span>     * Creates new Tree object.
45      * @param {Ext.data.NodeInterface} root (optional) The root node
46      */
47     constructor: function(root) {
48         var me = this;
49
50         
51
52         me.mixins.observable.constructor.call(me);
53
54         if (root) {
55             me.setRootNode(root);
56         }
57     },
58
59 <span id='Ext-data-Tree-method-getRootNode'>    /**
60 </span>     * Returns the root node for this tree.
61      * @return {Ext.data.NodeInterface}
62      */
63     getRootNode : function() {
64         return this.root;
65     },
66
67 <span id='Ext-data-Tree-method-setRootNode'>    /**
68 </span>     * Sets the root node for this tree.
69      * @param {Ext.data.NodeInterface} node
70      * @return {Ext.data.NodeInterface} The root node
71      */
72     setRootNode : function(node) {
73         var me = this;
74
75         me.root = node;
76         Ext.data.NodeInterface.decorate(node);
77
78         if (me.fireEvent('beforeappend', null, node) !== false) {
79             node.set('root', true);
80             node.updateInfo();
81
82             me.relayEvents(node, [
83 <span id='Ext-data-Tree-event-append'>                /**
84 </span>                 * @event append
85                  * @alias Ext.data.NodeInterface#append
86                  */
87                 &quot;append&quot;,
88
89 <span id='Ext-data-Tree-event-remove'>                /**
90 </span>                 * @event remove
91                  * @alias Ext.data.NodeInterface#remove
92                  */
93                 &quot;remove&quot;,
94
95 <span id='Ext-data-Tree-event-move'>                /**
96 </span>                 * @event move
97                  * @alias Ext.data.NodeInterface#move
98                  */
99                 &quot;move&quot;,
100
101 <span id='Ext-data-Tree-event-insert'>                /**
102 </span>                 * @event insert
103                  * @alias Ext.data.NodeInterface#insert
104                  */
105                 &quot;insert&quot;,
106
107 <span id='Ext-data-Tree-event-beforeappend'>                /**
108 </span>                 * @event beforeappend
109                  * @alias Ext.data.NodeInterface#beforeappend
110                  */
111                 &quot;beforeappend&quot;,
112
113 <span id='Ext-data-Tree-event-beforeremove'>                /**
114 </span>                 * @event beforeremove
115                  * @alias Ext.data.NodeInterface#beforeremove
116                  */
117                 &quot;beforeremove&quot;,
118
119 <span id='Ext-data-Tree-event-beforemove'>                /**
120 </span>                 * @event beforemove
121                  * @alias Ext.data.NodeInterface#beforemove
122                  */
123                 &quot;beforemove&quot;,
124
125 <span id='Ext-data-Tree-event-beforeinsert'>                /**
126 </span>                 * @event beforeinsert
127                  * @alias Ext.data.NodeInterface#beforeinsert
128                  */
129                 &quot;beforeinsert&quot;,
130
131 <span id='Ext-data-Tree-event-expand'>                 /**
132 </span>                  * @event expand
133                   * @alias Ext.data.NodeInterface#expand
134                   */
135                  &quot;expand&quot;,
136
137 <span id='Ext-data-Tree-event-collapse'>                 /**
138 </span>                  * @event collapse
139                   * @alias Ext.data.NodeInterface#collapse
140                   */
141                  &quot;collapse&quot;,
142
143 <span id='Ext-data-Tree-event-beforeexpand'>                 /**
144 </span>                  * @event beforeexpand
145                   * @alias Ext.data.NodeInterface#beforeexpand
146                   */
147                  &quot;beforeexpand&quot;,
148
149 <span id='Ext-data-Tree-event-beforecollapse'>                 /**
150 </span>                  * @event beforecollapse
151                   * @alias Ext.data.NodeInterface#beforecollapse
152                   */
153                  &quot;beforecollapse&quot; ,
154
155 <span id='Ext-data-Tree-event-rootchange'>                 /**
156 </span>                  * @event rootchange
157                   * Fires whenever the root node is changed in the tree.
158                   * @param {Ext.data.Model} root The new root
159                   */
160                  &quot;rootchange&quot;
161             ]);
162
163             node.on({
164                 scope: me,
165                 insert: me.onNodeInsert,
166                 append: me.onNodeAppend,
167                 remove: me.onNodeRemove
168             });
169
170             me.nodeHash = {};
171             me.registerNode(node);
172             me.fireEvent('append', null, node);
173             me.fireEvent('rootchange', node);
174         }
175
176         return node;
177     },
178
179 <span id='Ext-data-Tree-method-flatten'>    /**
180 </span>     * Flattens all the nodes in the tree into an array.
181      * @private
182      * @return {Ext.data.NodeInterface[]} The flattened nodes.
183      */
184     flatten: function(){
185         var nodes = [],
186             hash = this.nodeHash,
187             key;
188
189         for (key in hash) {
190             if (hash.hasOwnProperty(key)) {
191                 nodes.push(hash[key]);
192             }
193         }
194         return nodes;
195     },
196
197 <span id='Ext-data-Tree-method-onNodeInsert'>    /**
198 </span>     * Fired when a node is inserted into the root or one of it's children
199      * @private
200      * @param {Ext.data.NodeInterface} parent The parent node
201      * @param {Ext.data.NodeInterface} node The inserted node
202      */
203     onNodeInsert: function(parent, node) {
204         this.registerNode(node, true);
205     },
206
207 <span id='Ext-data-Tree-method-onNodeAppend'>    /**
208 </span>     * Fired when a node is appended into the root or one of it's children
209      * @private
210      * @param {Ext.data.NodeInterface} parent The parent node
211      * @param {Ext.data.NodeInterface} node The appended node
212      */
213     onNodeAppend: function(parent, node) {
214         this.registerNode(node, true);
215     },
216
217 <span id='Ext-data-Tree-method-onNodeRemove'>    /**
218 </span>     * Fired when a node is removed from the root or one of it's children
219      * @private
220      * @param {Ext.data.NodeInterface} parent The parent node
221      * @param {Ext.data.NodeInterface} node The removed node
222      */
223     onNodeRemove: function(parent, node) {
224         this.unregisterNode(node, true);
225     },
226
227 <span id='Ext-data-Tree-method-getNodeById'>    /**
228 </span>     * Gets a node in this tree by its id.
229      * @param {String} id
230      * @return {Ext.data.NodeInterface} The match node.
231      */
232     getNodeById : function(id) {
233         return this.nodeHash[id];
234     },
235
236 <span id='Ext-data-Tree-method-registerNode'>    /**
237 </span>     * Registers a node with the tree
238      * @private
239      * @param {Ext.data.NodeInterface} The node to register
240      * @param {Boolean} [includeChildren] True to unregister any child nodes
241      */
242     registerNode : function(node, includeChildren) {
243         this.nodeHash[node.getId() || node.internalId] = node;
244         if (includeChildren === true) {
245             node.eachChild(function(child){
246                 this.registerNode(child, true);
247             }, this);
248         }
249     },
250
251 <span id='Ext-data-Tree-method-unregisterNode'>    /**
252 </span>     * Unregisters a node with the tree
253      * @private
254      * @param {Ext.data.NodeInterface} The node to unregister
255      * @param {Boolean} [includeChildren] True to unregister any child nodes
256      */
257     unregisterNode : function(node, includeChildren) {
258         delete this.nodeHash[node.getId() || node.internalId];
259         if (includeChildren === true) {
260             node.eachChild(function(child){
261                 this.unregisterNode(child, true);
262             }, this);
263         }
264     },
265
266 <span id='Ext-data-Tree-method-sort'>    /**
267 </span>     * Sorts this tree
268      * @private
269      * @param {Function} sorterFn The function to use for sorting
270      * @param {Boolean} recursive True to perform recursive sorting
271      */
272     sort: function(sorterFn, recursive) {
273         this.getRootNode().sort(sorterFn, recursive);
274     },
275
276 <span id='Ext-data-Tree-method-filter'>     /**
277 </span>     * Filters this tree
278      * @private
279      * @param {Function} sorterFn The function to use for filtering
280      * @param {Boolean} recursive True to perform recursive filtering
281      */
282     filter: function(filters, recursive) {
283         this.getRootNode().filter(filters, recursive);
284     }
285 });</pre>
286 </body>
287 </html>