2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.tree.TreeEditor
\r
11 * @extends Ext.Editor
\r
12 * Provides editor functionality for inline tree node editing. Any valid {@link Ext.form.Field} subclass can be used
\r
13 * as the editor field.
\r
15 * @param {TreePanel} tree
\r
16 * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
\r
17 * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
\r
18 * @param {Object} config (optional) A TreeEditor config object
\r
20 Ext.tree.TreeEditor = function(tree, fc, config){
\r
22 var field = fc.events ? fc : new Ext.form.TextField(fc);
\r
23 Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
\r
28 tree.on('render', this.initEditor, this);
\r
30 this.initEditor(tree);
\r
34 Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
\r
36 * @cfg {String} alignment
\r
37 * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
\r
43 * @cfg {Boolean} hideEl
\r
44 * True to hide the bound element while the editor is displayed (defaults to false)
\r
49 * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
\r
51 cls: "x-small-editor x-tree-editor",
\r
53 * @cfg {Boolean} shim
\r
54 * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
\r
60 * @cfg {Number} maxWidth
\r
61 * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
\r
62 * the containing tree element's size, it will be automatically limited for you to the container width, taking
\r
63 * scroll and client offsets into account prior to each edit.
\r
67 * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
\r
68 * editing on the current node (defaults to 350). If two clicks occur on the same node within this time span,
\r
69 * the editor for the node will display, otherwise it will be processed as a regular click.
\r
73 initEditor : function(tree){
\r
74 tree.on('beforeclick', this.beforeNodeClick, this);
\r
75 tree.on('dblclick', this.onNodeDblClick, this);
\r
76 this.on('complete', this.updateNode, this);
\r
77 this.on('beforestartedit', this.fitToTree, this);
\r
78 this.on('startedit', this.bindScroll, this, {delay:10});
\r
79 this.on('specialkey', this.onSpecialKey, this);
\r
83 fitToTree : function(ed, el){
\r
84 var td = this.tree.getTreeEl().dom, nd = el.dom;
\r
85 if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
\r
86 td.scrollLeft = nd.offsetLeft;
\r
90 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
\r
91 this.setSize(w, '');
\r
95 triggerEdit : function(node, defer){
\r
96 this.completeEdit();
\r
97 if(node.attributes.editable !== false){
\r
99 * The tree node this editor is bound to. Read-only.
\r
100 * @type Ext.tree.TreeNode
\r
101 * @property editNode
\r
103 this.editNode = node;
\r
104 if(this.tree.autoScroll){
\r
105 node.ui.getEl().scrollIntoView(this.tree.body);
\r
107 this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
\r
113 bindScroll : function(){
\r
114 this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
\r
118 beforeNodeClick : function(node, e){
\r
119 clearTimeout(this.autoEditTimer);
\r
120 if(this.tree.getSelectionModel().isSelected(node)){
\r
122 return this.triggerEdit(node);
\r
126 onNodeDblClick : function(node, e){
\r
127 clearTimeout(this.autoEditTimer);
\r
131 updateNode : function(ed, value){
\r
132 this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
\r
133 this.editNode.setText(value);
\r
137 onHide : function(){
\r
138 Ext.tree.TreeEditor.superclass.onHide.call(this);
\r
140 this.editNode.ui.focus.defer(50, this.editNode.ui);
\r
145 onSpecialKey : function(field, e){
\r
146 var k = e.getKey();
\r
150 }else if(k == e.ENTER && !e.hasModifier()){
\r
152 this.completeEdit();
\r