docs/source/TreeEditor.html

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