Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / TreeSelectionModel.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.tree.DefaultSelectionModel"></div>/**
16  * @class Ext.tree.DefaultSelectionModel
17  * @extends Ext.util.Observable
18  * The default single selection for a TreePanel.
19  */
20 Ext.tree.DefaultSelectionModel = Ext.extend(Ext.util.Observable, {
21     
22     constructor : function(config){
23         this.selNode = null;
24    
25         this.addEvents(
26             <div id="event-Ext.tree.DefaultSelectionModel-selectionchange"></div>/**
27              * @event selectionchange
28              * Fires when the selected node changes
29              * @param {DefaultSelectionModel} this
30              * @param {TreeNode} node the new selection
31              */
32             'selectionchange',
33
34             <div id="event-Ext.tree.DefaultSelectionModel-beforeselect"></div>/**
35              * @event beforeselect
36              * Fires before the selected node changes, return false to cancel the change
37              * @param {DefaultSelectionModel} this
38              * @param {TreeNode} node the new selection
39              * @param {TreeNode} node the old selection
40              */
41             'beforeselect'
42         );
43
44         Ext.apply(this, config);
45         Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);    
46     },
47     
48     init : function(tree){
49         this.tree = tree;
50         tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
51         tree.on('click', this.onNodeClick, this);
52     },
53     
54     onNodeClick : function(node, e){
55         this.select(node);
56     },
57     
58     <div id="method-Ext.tree.DefaultSelectionModel-select"></div>/**
59      * Select a node.
60      * @param {TreeNode} node The node to select
61      * @return {TreeNode} The selected node
62      */
63     select : function(node, /* private*/ selectNextNode){
64         // If node is hidden, select the next node in whatever direction was being moved in.
65         if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
66             return selectNextNode.call(this, node);
67         }
68         var last = this.selNode;
69         if(node == last){
70             node.ui.onSelectedChange(true);
71         }else if(this.fireEvent('beforeselect', this, node, last) !== false){
72             if(last && last.ui){
73                 last.ui.onSelectedChange(false);
74             }
75             this.selNode = node;
76             node.ui.onSelectedChange(true);
77             this.fireEvent('selectionchange', this, node, last);
78         }
79         return node;
80     },
81     
82     <div id="method-Ext.tree.DefaultSelectionModel-unselect"></div>/**
83      * Deselect a node.
84      * @param {TreeNode} node The node to unselect
85      * @param {Boolean} silent True to stop the selectionchange event from firing.
86      */
87     unselect : function(node, silent){
88         if(this.selNode == node){
89             this.clearSelections(silent);
90         }    
91     },
92     
93     <div id="method-Ext.tree.DefaultSelectionModel-clearSelections"></div>/**
94      * Clear all selections
95      * @param {Boolean} silent True to stop the selectionchange event from firing.
96      */
97     clearSelections : function(silent){
98         var n = this.selNode;
99         if(n){
100             n.ui.onSelectedChange(false);
101             this.selNode = null;
102             if(silent !== true){
103                 this.fireEvent('selectionchange', this, null);
104             }
105         }
106         return n;
107     },
108     
109     <div id="method-Ext.tree.DefaultSelectionModel-getSelectedNode"></div>/**
110      * Get the selected node
111      * @return {TreeNode} The selected node
112      */
113     getSelectedNode : function(){
114         return this.selNode;    
115     },
116     
117     <div id="method-Ext.tree.DefaultSelectionModel-isSelected"></div>/**
118      * Returns true if the node is selected
119      * @param {TreeNode} node The node to check
120      * @return {Boolean}
121      */
122     isSelected : function(node){
123         return this.selNode == node;  
124     },
125
126     <div id="method-Ext.tree.DefaultSelectionModel-selectPrevious"></div>/**
127      * Selects the node above the selected node in the tree, intelligently walking the nodes
128      * @return TreeNode The new selection
129      */
130     selectPrevious : function(/* private */ s){
131         if(!(s = s || this.selNode || this.lastSelNode)){
132             return null;
133         }
134         // Here we pass in the current function to select to indicate the direction we're moving
135         var ps = s.previousSibling;
136         if(ps){
137             if(!ps.isExpanded() || ps.childNodes.length < 1){
138                 return this.select(ps, this.selectPrevious);
139             } else{
140                 var lc = ps.lastChild;
141                 while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){
142                     lc = lc.lastChild;
143                 }
144                 return this.select(lc, this.selectPrevious);
145             }
146         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
147             return this.select(s.parentNode, this.selectPrevious);
148         }
149         return null;
150     },
151
152     <div id="method-Ext.tree.DefaultSelectionModel-selectNext"></div>/**
153      * Selects the node above the selected node in the tree, intelligently walking the nodes
154      * @return TreeNode The new selection
155      */
156     selectNext : function(/* private */ s){
157         if(!(s = s || this.selNode || this.lastSelNode)){
158             return null;
159         }
160         // Here we pass in the current function to select to indicate the direction we're moving
161         if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){
162              return this.select(s.firstChild, this.selectNext);
163          }else if(s.nextSibling){
164              return this.select(s.nextSibling, this.selectNext);
165          }else if(s.parentNode){
166             var newS = null;
167             s.parentNode.bubble(function(){
168                 if(this.nextSibling){
169                     newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
170                     return false;
171                 }
172             });
173             return newS;
174          }
175         return null;
176     },
177
178     onKeyDown : function(e){
179         var s = this.selNode || this.lastSelNode;
180         // undesirable, but required
181         var sm = this;
182         if(!s){
183             return;
184         }
185         var k = e.getKey();
186         switch(k){
187              case e.DOWN:
188                  e.stopEvent();
189                  this.selectNext();
190              break;
191              case e.UP:
192                  e.stopEvent();
193                  this.selectPrevious();
194              break;
195              case e.RIGHT:
196                  e.preventDefault();
197                  if(s.hasChildNodes()){
198                      if(!s.isExpanded()){
199                          s.expand();
200                      }else if(s.firstChild){
201                          this.select(s.firstChild, e);
202                      }
203                  }
204              break;
205              case e.LEFT:
206                  e.preventDefault();
207                  if(s.hasChildNodes() && s.isExpanded()){
208                      s.collapse();
209                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
210                      this.select(s.parentNode, e);
211                  }
212              break;
213         };
214     }
215 });
216
217 <div id="cls-Ext.tree.MultiSelectionModel"></div>/**
218  * @class Ext.tree.MultiSelectionModel
219  * @extends Ext.util.Observable
220  * Multi selection for a TreePanel.
221  */
222 Ext.tree.MultiSelectionModel = Ext.extend(Ext.util.Observable, {
223     
224     constructor : function(config){
225         this.selNodes = [];
226         this.selMap = {};
227         this.addEvents(
228             <div id="event-Ext.tree.MultiSelectionModel-selectionchange"></div>/**
229              * @event selectionchange
230              * Fires when the selected nodes change
231              * @param {MultiSelectionModel} this
232              * @param {Array} nodes Array of the selected nodes
233              */
234             'selectionchange'
235         );
236         Ext.apply(this, config);
237         Ext.tree.MultiSelectionModel.superclass.constructor.call(this);    
238     },
239     
240     init : function(tree){
241         this.tree = tree;
242         tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
243         tree.on('click', this.onNodeClick, this);
244     },
245     
246     onNodeClick : function(node, e){
247         if(e.ctrlKey && this.isSelected(node)){
248             this.unselect(node);
249         }else{
250             this.select(node, e, e.ctrlKey);
251         }
252     },
253     
254     <div id="method-Ext.tree.MultiSelectionModel-select"></div>/**
255      * Select a node.
256      * @param {TreeNode} node The node to select
257      * @param {EventObject} e (optional) An event associated with the selection
258      * @param {Boolean} keepExisting True to retain existing selections
259      * @return {TreeNode} The selected node
260      */
261     select : function(node, e, keepExisting){
262         if(keepExisting !== true){
263             this.clearSelections(true);
264         }
265         if(this.isSelected(node)){
266             this.lastSelNode = node;
267             return node;
268         }
269         this.selNodes.push(node);
270         this.selMap[node.id] = node;
271         this.lastSelNode = node;
272         node.ui.onSelectedChange(true);
273         this.fireEvent('selectionchange', this, this.selNodes);
274         return node;
275     },
276     
277     <div id="method-Ext.tree.MultiSelectionModel-unselect"></div>/**
278      * Deselect a node.
279      * @param {TreeNode} node The node to unselect
280      */
281     unselect : function(node){
282         if(this.selMap[node.id]){
283             node.ui.onSelectedChange(false);
284             var sn = this.selNodes;
285             var index = sn.indexOf(node);
286             if(index != -1){
287                 this.selNodes.splice(index, 1);
288             }
289             delete this.selMap[node.id];
290             this.fireEvent('selectionchange', this, this.selNodes);
291         }
292     },
293     
294     <div id="method-Ext.tree.MultiSelectionModel-clearSelections"></div>/**
295      * Clear all selections
296      */
297     clearSelections : function(suppressEvent){
298         var sn = this.selNodes;
299         if(sn.length > 0){
300             for(var i = 0, len = sn.length; i < len; i++){
301                 sn[i].ui.onSelectedChange(false);
302             }
303             this.selNodes = [];
304             this.selMap = {};
305             if(suppressEvent !== true){
306                 this.fireEvent('selectionchange', this, this.selNodes);
307             }
308         }
309     },
310     
311     <div id="method-Ext.tree.MultiSelectionModel-isSelected"></div>/**
312      * Returns true if the node is selected
313      * @param {TreeNode} node The node to check
314      * @return {Boolean}
315      */
316     isSelected : function(node){
317         return this.selMap[node.id] ? true : false;  
318     },
319     
320     <div id="method-Ext.tree.MultiSelectionModel-getSelectedNodes"></div>/**
321      * Returns an array of the selected nodes
322      * @return {Array}
323      */
324     getSelectedNodes : function(){
325         return this.selNodes.concat([]);
326     },
327
328     onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,
329
330     selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,
331
332     selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
333 });</pre>    
334 </body>
335 </html>