1 <html><head><title>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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 * @class Roo.tree.TreeEditor
14 * Provides editor functionality for inline tree node editing. Any valid {@link Roo.form.Field} can be used
15 * as the editor field.
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
20 * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
21 * @cfg {Roo.form.TextField|Object} field The field configuration
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">);
37 </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
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
48 </span><span class="jsdoc-string">"beforenodeedit" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
49 </span><span class="jsdoc-syntax">});
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">);
54 </span><span class="jsdoc-var">this.tree </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">;
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">);
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 "l-l").
69 </span><span class="jsdoc-var">alignment</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"l-l"</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)
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">/**
79 * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
81 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-small-editor x-tree-editor"</span><span class="jsdoc-syntax">,
82 </span><span class="jsdoc-comment">/**
84 * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
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">"frame"</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.
95 </span><span class="jsdoc-var">maxWidth</span><span class="jsdoc-syntax">: 250,
97 </span><span class="jsdoc-var">editDelay </span><span class="jsdoc-syntax">: 350,
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">> </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">;
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">> 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">);
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">);
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">);
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">);
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">> </span><span class="jsdoc-var">this.editDelay </span><span class="jsdoc-syntax">&& </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">;
135 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
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">);
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">();
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">&& !</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">();
163 });</span></code></body></html>