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 Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
28 if (oldconfig) { // old style..
29 field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
33 config.field = config.field || {};
34 config.field.xtype = 'TextField';
35 field = Roo.factory(config.field, Roo.form);
37 config = config || {};
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 "beforenodeedit" : true
52 Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
56 tree.on('beforeclick', this.beforeNodeClick, this);
57 tree.getTreeEl().on('mousedown', this.hide, this);
58 this.on('complete', this.updateNode, this);
59 this.on('beforestartedit', this.fitToTree, this);
60 this.on('startedit', this.bindScroll, this, {delay:10});
61 this.on('specialkey', this.onSpecialKey, this);
64 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
66 * @cfg {String} alignment
67 * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
73 * @cfg {Boolean} hideEl
74 * True to hide the bound element while the editor is displayed (defaults to false)
79 * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
81 cls: "x-small-editor x-tree-editor",
84 * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
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.
100 fitToTree : function(ed, el){
101 var td = this.tree.getTreeEl().dom, nd = el.dom;
102 if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
103 td.scrollLeft = nd.offsetLeft;
107 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
110 return this.fireEvent('beforenodeedit', this, this.editNode);
115 triggerEdit : function(node){
117 this.editNode = node;
118 this.startEdit(node.ui.textNode, node.text);
122 bindScroll : function(){
123 this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
127 beforeNodeClick : function(node, e){
128 var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
129 this.lastClick = new Date();
130 if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
132 this.triggerEdit(node);
139 updateNode : function(ed, value){
140 this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
141 this.editNode.setText(value);
146 Roo.tree.TreeEditor.superclass.onHide.call(this);
148 this.editNode.ui.focus();
153 onSpecialKey : function(field, e){
158 }else if(k == e.ENTER && !e.hasModifier()){