src/widgets/tree/TreeEditor.js

   1 /*!
   2  * Ext JS Library 3.1.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({
  73             scope: this,
  74             beforeclick: this.beforeNodeClick,
  75             dblclick: this.onNodeDblClick
  76         });
  77         this.on({
  78             scope: this,
  79             complete: this.updateNode,
  80             beforestartedit: this.fitToTree,
  81             specialkey: this.onSpecialKey
  82         });
  83         this.on('startedit', this.bindScroll, this, {delay:10});
  84     },
  85
  86     // private
  87     fitToTree : function(ed, el){
  88         var td = this.tree.getTreeEl().dom, nd = el.dom;
  89         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
  90             td.scrollLeft = nd.offsetLeft;
  91         }
  92         var w = Math.min(
  93                 this.maxWidth,
  94                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
  95         this.setSize(w, '');
  96     },
  97
  98     /**
  99      * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
 100      * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
 101      */
 102     triggerEdit : function(node, defer){
 103         this.completeEdit();
 104                 if(node.attributes.editable !== false){
 105            /**
 106             * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
 107             * @type Ext.tree.TreeNode
 108             * @property editNode
 109             */
 110                         this.editNode = node;
 111             if(this.tree.autoScroll){
 112                 Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
 113             }
 114             var value = node.text || '';
 115             if (!Ext.isGecko && Ext.isEmpty(node.text)){
 116                 node.setText('&#160;');
 117             }
 118             this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
 119             return false;
 120         }
 121     },
 122
 123     // private
 124     bindScroll : function(){
 125         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
 126     },
 127
 128     // private
 129     beforeNodeClick : function(node, e){
 130         clearTimeout(this.autoEditTimer);
 131         if(this.tree.getSelectionModel().isSelected(node)){
 132             e.stopEvent();
 133             return this.triggerEdit(node);
 134         }
 135     },
 136
 137     onNodeDblClick : function(node, e){
 138         clearTimeout(this.autoEditTimer);
 139     },
 140
 141     // private
 142     updateNode : function(ed, value){
 143         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
 144         this.editNode.setText(value);
 145     },
 146
 147     // private
 148     onHide : function(){
 149         Ext.tree.TreeEditor.superclass.onHide.call(this);
 150         if(this.editNode){
 151             this.editNode.ui.focus.defer(50, this.editNode.ui);
 152         }
 153     },
 154
 155     // private
 156     onSpecialKey : function(field, e){
 157         var k = e.getKey();
 158         if(k == e.ESC){
 159             e.stopEvent();
 160             this.cancelEdit();
 161         }else if(k == e.ENTER && !e.hasModifier()){
 162             e.stopEvent();
 163             this.completeEdit();
 164         }
 165     },
 166
 167     onDestroy : function(){
 168         clearTimeout(this.autoEditTimer);
 169         Ext.tree.TreeEditor.superclass.onDestroy.call(this);
 170         var tree = this.tree;
 171         tree.un('beforeclick', this.beforeNodeClick, this);
 172         tree.un('dblclick', this.onNodeDblClick, this);
 173     }
 174 });