| 27 |
jpm |
1 |
/*
|
|
|
2 |
* Ext JS Library 2.0.2
|
|
|
3 |
* Copyright(c) 2006-2008, Ext JS, LLC.
|
|
|
4 |
* licensing@extjs.com
|
|
|
5 |
*
|
|
|
6 |
* http://extjs.com/license
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
/**
|
|
|
10 |
* @class Ext.tree.TreeEditor
|
|
|
11 |
* @extends Ext.Editor
|
|
|
12 |
* Provides editor functionality for inline tree node editing. Any valid {@link Ext.form.Field} can be used
|
|
|
13 |
* as the editor field.
|
|
|
14 |
* @constructor
|
|
|
15 |
* @param {TreePanel} tree
|
|
|
16 |
* @param {Object} config Either a prebuilt {@link Ext.form.Field} instance or a Field config object
|
|
|
17 |
*/
|
|
|
18 |
Ext.tree.TreeEditor = function(tree, config){
|
|
|
19 |
config = config || {};
|
|
|
20 |
var field = config.events ? config : new Ext.form.TextField(config);
|
|
|
21 |
Ext.tree.TreeEditor.superclass.constructor.call(this, field);
|
|
|
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 |
// private
|
|
|
93 |
triggerEdit : function(node, defer){
|
|
|
94 |
this.completeEdit();
|
|
|
95 |
if(node.attributes.editable !== false){
|
|
|
96 |
this.editNode = node;
|
|
|
97 |
this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
|
|
|
98 |
return false;
|
|
|
99 |
}
|
|
|
100 |
},
|
|
|
101 |
|
|
|
102 |
// private
|
|
|
103 |
bindScroll : function(){
|
|
|
104 |
this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
|
|
|
105 |
},
|
|
|
106 |
|
|
|
107 |
// private
|
|
|
108 |
beforeNodeClick : function(node, e){
|
|
|
109 |
clearTimeout(this.autoEditTimer);
|
|
|
110 |
if(this.tree.getSelectionModel().isSelected(node)){
|
|
|
111 |
e.stopEvent();
|
|
|
112 |
return this.triggerEdit(node);
|
|
|
113 |
}
|
|
|
114 |
},
|
|
|
115 |
|
|
|
116 |
onNodeDblClick : function(node, e){
|
|
|
117 |
clearTimeout(this.autoEditTimer);
|
|
|
118 |
},
|
|
|
119 |
|
|
|
120 |
// private
|
|
|
121 |
updateNode : function(ed, value){
|
|
|
122 |
this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
|
|
|
123 |
this.editNode.setText(value);
|
|
|
124 |
},
|
|
|
125 |
|
|
|
126 |
// private
|
|
|
127 |
onHide : function(){
|
|
|
128 |
Ext.tree.TreeEditor.superclass.onHide.call(this);
|
|
|
129 |
if(this.editNode){
|
|
|
130 |
this.editNode.ui.focus.defer(50, this.editNode.ui);
|
|
|
131 |
}
|
|
|
132 |
},
|
|
|
133 |
|
|
|
134 |
// private
|
|
|
135 |
onSpecialKey : function(field, e){
|
|
|
136 |
var k = e.getKey();
|
|
|
137 |
if(k == e.ESC){
|
|
|
138 |
e.stopEvent();
|
|
|
139 |
this.cancelEdit();
|
|
|
140 |
}else if(k == e.ENTER && !e.hasModifier()){
|
|
|
141 |
e.stopEvent();
|
|
|
142 |
this.completeEdit();
|
|
|
143 |
}
|
|
|
144 |
}
|
|
|
145 |
});
|