docs/source/TreeEditor.html

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