X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/TreeEditor.html
diff --git a/docs/source/TreeEditor.html b/docs/source/TreeEditor.html
new file mode 100644
index 00000000..d8121669
--- /dev/null
+++ b/docs/source/TreeEditor.html
@@ -0,0 +1,163 @@
+
+
+ The source code
+
+
+
+
+ /**
+ * @class Ext.tree.TreeEditor
+ * @extends Ext.Editor
+ * Provides editor functionality for inline tree node editing. Any valid {@link Ext.form.Field} subclass can be used
+ * as the editor field.
+ * @constructor
+ * @param {TreePanel} tree
+ * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
+ * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
+ * @param {Object} config (optional) A TreeEditor config object
+ */
+Ext.tree.TreeEditor = function(tree, fc, config){
+ fc = fc || {};
+ var field = fc.events ? fc : new Ext.form.TextField(fc);
+ Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
+
+ this.tree = tree;
+
+ if(!tree.rendered){
+ tree.on('render', this.initEditor, this);
+ }else{
+ this.initEditor(tree);
+ }
+};
+
+Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
+ /**
+ * @cfg {String} alignment
+ * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
+ */
+ alignment: "l-l",
+ // inherit
+ autoSize: false,
+ /**
+ * @cfg {Boolean} hideEl
+ * True to hide the bound element while the editor is displayed (defaults to false)
+ */
+ hideEl : false,
+ /**
+ * @cfg {String} cls
+ * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+ */
+ cls: "x-small-editor x-tree-editor",
+ /**
+ * @cfg {Boolean} shim
+ * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+ */
+ shim:false,
+ // inherit
+ shadow:"frame",
+ /**
+ * @cfg {Number} maxWidth
+ * The maximum width in pixels of the editor field (defaults to 250). Note that if the maxWidth would exceed
+ * the containing tree element's size, it will be automatically limited for you to the container width, taking
+ * scroll and client offsets into account prior to each edit.
+ */
+ maxWidth: 250,
+ /**
+ * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
+ * editing on the current node (defaults to 350). If two clicks occur on the same node within this time span,
+ * the editor for the node will display, otherwise it will be processed as a regular click.
+ */
+ editDelay : 350,
+
+ initEditor : function(tree){
+ tree.on('beforeclick', this.beforeNodeClick, this);
+ tree.on('dblclick', this.onNodeDblClick, this);
+ this.on('complete', this.updateNode, this);
+ this.on('beforestartedit', this.fitToTree, this);
+ this.on('startedit', this.bindScroll, this, {delay:10});
+ this.on('specialkey', this.onSpecialKey, this);
+ },
+
+ // private
+ fitToTree : function(ed, el){
+ var td = this.tree.getTreeEl().dom, nd = el.dom;
+ if(td.scrollLeft > nd.offsetLeft){ // ensure the node left point is visible
+ td.scrollLeft = nd.offsetLeft;
+ }
+ var w = Math.min(
+ this.maxWidth,
+ (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
+ this.setSize(w, '');
+ },
+
+ /**
+ * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
+ * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
+ */
+ triggerEdit : function(node, defer){
+ this.completeEdit();
+ if(node.attributes.editable !== false){
+ /**
+ * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
+ * @type Ext.tree.TreeNode
+ * @property editNode
+ */
+ this.editNode = node;
+ if(this.tree.autoScroll){
+ Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
+ }
+ var value = node.text || '';
+ if (!Ext.isGecko && Ext.isEmpty(node.text)){
+ node.setText(' ');
+ }
+ this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
+ return false;
+ }
+ },
+
+ // private
+ bindScroll : function(){
+ this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
+ },
+
+ // private
+ beforeNodeClick : function(node, e){
+ clearTimeout(this.autoEditTimer);
+ if(this.tree.getSelectionModel().isSelected(node)){
+ e.stopEvent();
+ return this.triggerEdit(node);
+ }
+ },
+
+ onNodeDblClick : function(node, e){
+ clearTimeout(this.autoEditTimer);
+ },
+
+ // private
+ updateNode : function(ed, value){
+ this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+ this.editNode.setText(value);
+ },
+
+ // private
+ onHide : function(){
+ Ext.tree.TreeEditor.superclass.onHide.call(this);
+ if(this.editNode){
+ this.editNode.ui.focus.defer(50, this.editNode.ui);
+ }
+ },
+
+ // private
+ onSpecialKey : function(field, e){
+ var k = e.getKey();
+ if(k == e.ESC){
+ e.stopEvent();
+ this.cancelEdit();
+ }else if(k == e.ENTER && !e.hasModifier()){
+ e.stopEvent();
+ this.completeEdit();
+ }
+ }
+});
+
+
\ No newline at end of file