docs/source/TreeEditor.html

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