docs/source/TreeSelectionModel.html

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