source/widgets/tree/TreeEditor.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\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
  14  * @constructor\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
  19  */\r
  20 Ext.tree.TreeEditor = function(tree, fc, config){\r
  21     fc = fc || {};\r
  22     var field = fc.events ? fc : new Ext.form.TextField(fc);\r
  23     Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);\r
  24 \r
  25     this.tree = tree;\r
  26 \r
  27     if(!tree.rendered){\r
  28         tree.on('render', this.initEditor, this);\r
  29     }else{\r
  30         this.initEditor(tree);\r
  31     }\r
  32 };\r
  33 \r
  34 Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {\r
  35     /**\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
  38      */\r
  39     alignment: "l-l",\r
  40     // inherit\r
  41     autoSize: false,\r
  42     /**\r
  43      * @cfg {Boolean} hideEl\r
  44      * True to hide the bound element while the editor is displayed (defaults to false)\r
  45      */\r
  46     hideEl : false,\r
  47     /**\r
  48      * @cfg {String} cls\r
  49      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")\r
  50      */\r
  51     cls: "x-small-editor x-tree-editor",\r
  52     /**\r
  53      * @cfg {Boolean} shim\r
  54      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)\r
  55      */\r
  56     shim:false,\r
  57     // inherit\r
  58     shadow:"frame",\r
  59     /**\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
  64      */\r
  65     maxWidth: 250,\r
  66     /**\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
  70      */\r
  71     editDelay : 350,\r
  72 \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
  80     },\r
  81 \r
  82     // private\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
  87         }\r
  88         var w = Math.min(\r
  89                 this.maxWidth,\r
  90                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);\r
  91         this.setSize(w, '');\r
  92     },\r
  93 \r
  94     // private\r
  95     triggerEdit : function(node, defer){\r
  96         this.completeEdit();\r
  97                 if(node.attributes.editable !== false){\r
  98                /**\r
  99                 * The tree node this editor is bound to. Read-only.\r
 100                 * @type Ext.tree.TreeNode\r
 101                 * @property editNode\r
 102                 */\r
 103                         this.editNode = node;\r
 104             if(this.tree.autoScroll){\r
 105                 node.ui.getEl().scrollIntoView(this.tree.body);\r
 106             }\r
 107             this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);\r
 108             return false;\r
 109         }\r
 110     },\r
 111 \r
 112     // private\r
 113     bindScroll : function(){\r
 114         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);\r
 115     },\r
 116 \r
 117     // private\r
 118     beforeNodeClick : function(node, e){\r
 119         clearTimeout(this.autoEditTimer);\r
 120         if(this.tree.getSelectionModel().isSelected(node)){\r
 121             e.stopEvent();\r
 122             return this.triggerEdit(node);\r
 123         }\r
 124     },\r
 125 \r
 126     onNodeDblClick : function(node, e){\r
 127         clearTimeout(this.autoEditTimer);\r
 128     },\r
 129 \r
 130     // private\r
 131     updateNode : function(ed, value){\r
 132         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);\r
 133         this.editNode.setText(value);\r
 134     },\r
 135 \r
 136     // private\r
 137     onHide : function(){\r
 138         Ext.tree.TreeEditor.superclass.onHide.call(this);\r
 139         if(this.editNode){\r
 140             this.editNode.ui.focus.defer(50, this.editNode.ui);\r
 141         }\r
 142     },\r
 143 \r
 144     // private\r
 145     onSpecialKey : function(field, e){\r
 146         var k = e.getKey();\r
 147         if(k == e.ESC){\r
 148             e.stopEvent();\r
 149             this.cancelEdit();\r
 150         }else if(k == e.ENTER && !e.hasModifier()){\r
 151             e.stopEvent();\r
 152             this.completeEdit();\r
 153         }\r
 154     }\r
 155 });