Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / TreeEditor.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.TreeEditor"></div>/**
10  * @class Ext.tree.TreeEditor
11  * @extends Ext.Editor
12  * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} subclass can be used
13  * as the editor field.
14  * @constructor
15  * @param {TreePanel} tree
16  * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
17  * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
18  * @param {Object} config (optional) A TreeEditor config object
19  */
20 Ext.tree.TreeEditor = function(tree, fc, config){
21     fc = fc || {};
22     var field = fc.events ? fc : new Ext.form.TextField(fc);
23     
24     Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
25
26     this.tree = tree;
27
28     if(!tree.rendered){
29         tree.on('render', this.initEditor, this);
30     }else{
31         this.initEditor(tree);
32     }
33 };
34
35 Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
36     <div id="cfg-Ext.tree.TreeEditor-alignment"></div>/**
37      * @cfg {String} alignment
38      * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
39      */
40     alignment: "l-l",
41     // inherit
42     autoSize: false,
43     <div id="cfg-Ext.tree.TreeEditor-hideEl"></div>/**
44      * @cfg {Boolean} hideEl
45      * True to hide the bound element while the editor is displayed (defaults to false)
46      */
47     hideEl : false,
48     <div id="cfg-Ext.tree.TreeEditor-cls"></div>/**
49      * @cfg {String} cls
50      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
51      */
52     cls: "x-small-editor x-tree-editor",
53     <div id="cfg-Ext.tree.TreeEditor-shim"></div>/**
54      * @cfg {Boolean} shim
55      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
56      */
57     shim:false,
58     // inherit
59     shadow:"frame",
60     <div id="cfg-Ext.tree.TreeEditor-maxWidth"></div>/**
61      * @cfg {Number} maxWidth
62      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
63      * the containing tree element's size, it will be automatically limited for you to the container width, taking
64      * scroll and client offsets into account prior to each edit.
65      */
66     maxWidth: 250,
67     <div id="cfg-Ext.tree.TreeEditor-editDelay"></div>/**
68      * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
69      * editing on the current node (defaults to 350).  If two clicks occur on the same node within this time span,
70      * the editor for the node will display, otherwise it will be processed as a regular click.
71      */
72     editDelay : 350,
73
74     initEditor : function(tree){
75         tree.on({
76             scope      : this,
77             beforeclick: this.beforeNodeClick,
78             dblclick   : this.onNodeDblClick
79         });
80         
81         this.on({
82             scope          : this,
83             complete       : this.updateNode,
84             beforestartedit: this.fitToTree,
85             specialkey     : this.onSpecialKey
86         });
87         
88         this.on('startedit', this.bindScroll, this, {delay:10});
89     },
90
91     // private
92     fitToTree : function(ed, el){
93         var td = this.tree.getTreeEl().dom, nd = el.dom;
94         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
95             td.scrollLeft = nd.offsetLeft;
96         }
97         var w = Math.min(
98                 this.maxWidth,
99                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
100         this.setSize(w, '');
101     },
102
103     <div id="method-Ext.tree.TreeEditor-triggerEdit"></div>/**
104      * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
105      * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
106      */
107     triggerEdit : function(node, defer){
108         this.completeEdit();
109                 if(node.attributes.editable !== false){
110            <div id="prop-Ext.tree.TreeEditor-editNode"></div>/**
111             * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
112             * @type Ext.tree.TreeNode
113             * @property editNode
114             */
115                         this.editNode = node;
116             if(this.tree.autoScroll){
117                 Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
118             }
119             var value = node.text || '';
120             if (!Ext.isGecko && Ext.isEmpty(node.text)){
121                 node.setText('&#160;');
122             }
123             this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
124             return false;
125         }
126     },
127
128     // private
129     bindScroll : function(){
130         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
131     },
132
133     // private
134     beforeNodeClick : function(node, e){
135         clearTimeout(this.autoEditTimer);
136         if(this.tree.getSelectionModel().isSelected(node)){
137             e.stopEvent();
138             return this.triggerEdit(node);
139         }
140     },
141
142     onNodeDblClick : function(node, e){
143         clearTimeout(this.autoEditTimer);
144     },
145
146     // private
147     updateNode : function(ed, value){
148         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
149         this.editNode.setText(value);
150     },
151
152     // private
153     onHide : function(){
154         Ext.tree.TreeEditor.superclass.onHide.call(this);
155         if(this.editNode){
156             this.editNode.ui.focus.defer(50, this.editNode.ui);
157         }
158     },
159
160     // private
161     onSpecialKey : function(field, e){
162         var k = e.getKey();
163         if(k == e.ESC){
164             e.stopEvent();
165             this.cancelEdit();
166         }else if(k == e.ENTER && !e.hasModifier()){
167             e.stopEvent();
168             this.completeEdit();
169         }
170     },
171     
172     onDestroy : function(){
173         clearTimeout(this.autoEditTimer);
174         Ext.tree.TreeEditor.superclass.onDestroy.call(this);
175         var tree = this.tree;
176         tree.un('beforeclick', this.beforeNodeClick, this);
177         tree.un('dblclick', this.onNodeDblClick, this);
178     }
179 });</pre>    \r
180 </body>\r
181 </html>