3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.tree.TreeEditor
10 * Provides editor functionality for inline tree node editing. Any valid {@link Ext.form.Field} subclass can be used
11 * as the editor field.
13 * @param {TreePanel} tree
14 * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
15 * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
16 * @param {Object} config (optional) A TreeEditor config object
18 Ext.tree.TreeEditor = function(tree, fc, config){
20 var field = fc.events ? fc : new Ext.form.TextField(fc);
22 Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
27 tree.on('render', this.initEditor, this);
29 this.initEditor(tree);
33 Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
35 * @cfg {String} alignment
36 * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
42 * @cfg {Boolean} hideEl
43 * True to hide the bound element while the editor is displayed (defaults to false)
48 * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
50 cls: "x-small-editor x-tree-editor",
53 * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
59 * @cfg {Number} maxWidth
60 * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
61 * the containing tree element's size, it will be automatically limited for you to the container width, taking
62 * scroll and client offsets into account prior to each edit.
66 * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
67 * editing on the current node (defaults to 350). If two clicks occur on the same node within this time span,
68 * the editor for the node will display, otherwise it will be processed as a regular click.
72 initEditor : function(tree){
75 beforeclick: this.beforeNodeClick,
76 dblclick : this.onNodeDblClick
81 complete : this.updateNode,
82 beforestartedit: this.fitToTree,
83 specialkey : this.onSpecialKey
86 this.on('startedit', this.bindScroll, this, {delay:10});
90 fitToTree : function(ed, el){
91 var td = this.tree.getTreeEl().dom, nd = el.dom;
92 if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
93 td.scrollLeft = nd.offsetLeft;
97 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
102 * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
103 * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
105 triggerEdit : function(node, defer){
107 if(node.attributes.editable !== false){
109 * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
110 * @type Ext.tree.TreeNode
113 this.editNode = node;
114 if(this.tree.autoScroll){
115 Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
117 var value = node.text || '';
118 if (!Ext.isGecko && Ext.isEmpty(node.text)){
119 node.setText(' ');
121 this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
127 bindScroll : function(){
128 this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
132 beforeNodeClick : function(node, e){
133 clearTimeout(this.autoEditTimer);
134 if(this.tree.getSelectionModel().isSelected(node)){
136 return this.triggerEdit(node);
140 onNodeDblClick : function(node, e){
141 clearTimeout(this.autoEditTimer);
145 updateNode : function(ed, value){
146 this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
147 this.editNode.setText(value);
152 Ext.tree.TreeEditor.superclass.onHide.call(this);
154 this.editNode.ui.focus.defer(50, this.editNode.ui);
159 onSpecialKey : function(field, e){
164 }else if(k == e.ENTER && !e.hasModifier()){
170 onDestroy : function(){
171 clearTimeout(this.autoEditTimer);
172 Ext.tree.TreeEditor.superclass.onDestroy.call(this);
173 var tree = this.tree;
174 tree.un('beforeclick', this.beforeNodeClick, this);
175 tree.un('dblclick', this.onNodeDblClick, this);