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