git.roojs.org Git - roojs1/blob - docs/src/Roo_tree_TreeEditor.js.html

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/tree/TreeEditor.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11 /**
  12  * @class Roo.tree.TreeEditor
  13  * @extends Roo.Editor
  14  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
  15  * as the editor field.
  16  * @constructor
  17  * @param {Object} config (used to be the tree panel.)
  18  * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
  19  *
  20  * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
  21  * @cfg {Roo.form.TextField|Object} field The field configuration
  22  *
  23  *
  24  */
  25 </span><span class="jsdoc-var">Roo.tree.TreeEditor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">oldconfig</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// was -- (tree, config){
  26     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
  27     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">;
  28     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">oldconfig</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// old style..
  29         </span><span class="jsdoc-var">field </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oldconfig.events </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">oldconfig </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">oldconfig</span><span class="jsdoc-syntax">);
  30     } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
  31         </span><span class="jsdoc-comment">// new style..
  32         </span><span class="jsdoc-var">tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.tree</span><span class="jsdoc-syntax">;
  33         </span><span class="jsdoc-var">config.field </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.field  </span><span class="jsdoc-syntax">|| {};
  34         </span><span class="jsdoc-var">config.field.xtype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'TextField'</span><span class="jsdoc-syntax">;
  35         </span><span class="jsdoc-var">field </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">);
  36     }
  37     </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
  38
  39
  40     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  41         </span><span class="jsdoc-comment">/**
  42          * @event beforenodeedit
  43          * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
  44          * false from the handler of this event.
  45          * @param {Editor} this
  46          * @param {Roo.tree.Node} node
  47          */
  48         </span><span class="jsdoc-string">&quot;beforenodeedit&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  49     </span><span class="jsdoc-syntax">});
  50
  51     </span><span class="jsdoc-comment">//Roo.log(config);
  52     </span><span class="jsdoc-var">Roo.tree.TreeEditor.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  53
  54     </span><span class="jsdoc-var">this.tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">;
  55
  56     </span><span class="jsdoc-var">tree.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeNodeClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  57     </span><span class="jsdoc-var">tree.getTreeEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  58     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'complete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.updateNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  59     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforestartedit'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fitToTree</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  60     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'startedit'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.bindScroll</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">:10});
  61     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'specialkey'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onSpecialKey</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  62 };
  63
  64 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.tree.TreeEditor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Editor</span><span class="jsdoc-syntax">, {
  65     </span><span class="jsdoc-comment">/**
  66      * @cfg {String} alignment
  67      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to &quot;l-l&quot;).
  68      */
  69     </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;l-l&quot;</span><span class="jsdoc-syntax">,
  70     </span><span class="jsdoc-comment">// inherit
  71     </span><span class="jsdoc-var">autoSize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  72     </span><span class="jsdoc-comment">/**
  73      * @cfg {Boolean} hideEl
  74      * True to hide the bound element while the editor is displayed (defaults to false)
  75      */
  76     </span><span class="jsdoc-var">hideEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  77     </span><span class="jsdoc-comment">/**
  78      * @cfg {String} cls
  79      * CSS class to apply to the editor (defaults to &quot;x-small-editor x-tree-editor&quot;)
  80      */
  81     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-small-editor x-tree-editor&quot;</span><span class="jsdoc-syntax">,
  82     </span><span class="jsdoc-comment">/**
  83      * @cfg {Boolean} shim
  84      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
  85      */
  86     </span><span class="jsdoc-var">shim</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  87     </span><span class="jsdoc-comment">// inherit
  88     </span><span class="jsdoc-var">shadow</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;frame&quot;</span><span class="jsdoc-syntax">,
  89     </span><span class="jsdoc-comment">/**
  90      * @cfg {Number} maxWidth
  91      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
  92      * the containing tree element's size, it will be automatically limited for you to the container width, taking
  93      * scroll and client offsets into account prior to each edit.
  94      */
  95     </span><span class="jsdoc-var">maxWidth</span><span class="jsdoc-syntax">: 250,
  96
  97     </span><span class="jsdoc-var">editDelay </span><span class="jsdoc-syntax">: 350,
  98
  99     </span><span class="jsdoc-comment">// private
 100     </span><span class="jsdoc-var">fitToTree </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 101         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tree.getTreeEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
 102         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td.scrollLeft </span><span class="jsdoc-syntax">&gt;  </span><span class="jsdoc-var">nd.offsetLeft</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// ensure the node left point is visible
 103             </span><span class="jsdoc-var">td.scrollLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nd.offsetLeft</span><span class="jsdoc-syntax">;
 104         }
 105         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(
 106                 </span><span class="jsdoc-var">this.maxWidth</span><span class="jsdoc-syntax">,
 107                 (</span><span class="jsdoc-var">td.clientWidth </span><span class="jsdoc-syntax">&gt; 20 ? </span><span class="jsdoc-var">td.clientWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.offsetWidth</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">nd.offsetLeft</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">td.scrollLeft</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-comment">/*cushion*/</span><span class="jsdoc-syntax">5);
 108         </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 109
 110         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforenodeedit'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.editNode</span><span class="jsdoc-syntax">);
 111
 112     },
 113
 114     </span><span class="jsdoc-comment">// private
 115     </span><span class="jsdoc-var">triggerEdit </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">){
 116         </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
 117         </span><span class="jsdoc-var">this.editNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
 118         </span><span class="jsdoc-var">this.startEdit</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node.ui.textNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">node.text</span><span class="jsdoc-syntax">);
 119     },
 120
 121     </span><span class="jsdoc-comment">// private
 122     </span><span class="jsdoc-var">bindScroll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 123         </span><span class="jsdoc-var">this.tree.getTreeEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cancelEdit</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 124     },
 125
 126     </span><span class="jsdoc-comment">// private
 127     </span><span class="jsdoc-var">beforeNodeClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 128         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sinceLast </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.lastClick </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.lastClick.getElapsed</span><span class="jsdoc-syntax">() : 0);
 129         </span><span class="jsdoc-var">this.lastClick </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">();
 130         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sinceLast </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.editDelay </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.tree.getSelectionModel</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.isSelected</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)){
 131             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 132             </span><span class="jsdoc-var">this.triggerEdit</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
 133             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 134         }
 135         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 136     },
 137
 138     </span><span class="jsdoc-comment">// private
 139     </span><span class="jsdoc-var">updateNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
 140         </span><span class="jsdoc-var">this.tree.getTreeEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cancelEdit</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 141         </span><span class="jsdoc-var">this.editNode.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
 142     },
 143
 144     </span><span class="jsdoc-comment">// private
 145     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 146         </span><span class="jsdoc-var">Roo.tree.TreeEditor.superclass.onHide.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 147         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editNode</span><span class="jsdoc-syntax">){
 148             </span><span class="jsdoc-var">this.editNode.ui.focus</span><span class="jsdoc-syntax">();
 149         }
 150     },
 151
 152     </span><span class="jsdoc-comment">// private
 153     </span><span class="jsdoc-var">onSpecialKey </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 154         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
 155         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">e.ESC</span><span class="jsdoc-syntax">){
 156             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 157             </span><span class="jsdoc-var">this.cancelEdit</span><span class="jsdoc-syntax">();
 158         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">e.ENTER </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">e.hasModifier</span><span class="jsdoc-syntax">()){
 159             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 160             </span><span class="jsdoc-var">this.completeEdit</span><span class="jsdoc-syntax">();
 161         }
 162     }
 163 });</span></code></body></html>