git.roojs.org Git - roojs1/blob - Roo/tree/TreeEditor.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 /**
  12  * @class Roo.tree.TreeEditor
  13  * @extends Roo.Editor
  14  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
  15  * as the editor field.
  16  * @constructor
  17  * @param {TreePanel} tree
  18  * @param {Object} config Either a prebuilt {@link Roo.form.Field} instance or a Field config object
  19  */
  20 Roo.tree.TreeEditor = function(tree, config){
  21     config = config || {};
  22     var field = config.events ? config : new Roo.form.TextField(config);
  23     Roo.tree.TreeEditor.superclass.constructor.call(this, field);
  24
  25     this.tree = tree;
  26
  27     tree.on('beforeclick', this.beforeNodeClick, this);
  28     tree.getTreeEl().on('mousedown', this.hide, this);
  29     this.on('complete', this.updateNode, this);
  30     this.on('beforestartedit', this.fitToTree, this);
  31     this.on('startedit', this.bindScroll, this, {delay:10});
  32     this.on('specialkey', this.onSpecialKey, this);
  33 };
  34
  35 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
  36     /**
  37      * @cfg {String} alignment
  38      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
  39      */
  40     alignment: "l-l",
  41     // inherit
  42     autoSize: false,
  43     /**
  44      * @cfg {Boolean} hideEl
  45      * True to hide the bound element while the editor is displayed (defaults to false)
  46      */
  47     hideEl : false,
  48     /**
  49      * @cfg {String} cls
  50      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
  51      */
  52     cls: "x-small-editor x-tree-editor",
  53     /**
  54      * @cfg {Boolean} shim
  55      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
  56      */
  57     shim:false,
  58     // inherit
  59     shadow:"frame",
  60     /**
  61      * @cfg {Number} maxWidth
  62      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
  63      * the containing tree element's size, it will be automatically limited for you to the container width, taking
  64      * scroll and client offsets into account prior to each edit.
  65      */
  66     maxWidth: 250,
  67
  68     editDelay : 350,
  69
  70     // private
  71     fitToTree : function(ed, el){
  72         var td = this.tree.getTreeEl().dom, nd = el.dom;
  73         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
  74             td.scrollLeft = nd.offsetLeft;
  75         }
  76         var w = Math.min(
  77                 this.maxWidth,
  78                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
  79         this.setSize(w, '');
  80     },
  81
  82     // private
  83     triggerEdit : function(node){
  84         this.completeEdit();
  85         this.editNode = node;
  86         this.startEdit(node.ui.textNode, node.text);
  87     },
  88
  89     // private
  90     bindScroll : function(){
  91         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
  92     },
  93
  94     // private
  95     beforeNodeClick : function(node, e){
  96         var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
  97         this.lastClick = new Date();
  98         if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
  99             e.stopEvent();
 100             this.triggerEdit(node);
 101             return false;
 102         }
 103     },
 104
 105     // private
 106     updateNode : function(ed, value){
 107         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
 108         this.editNode.setText(value);
 109     },
 110
 111     // private
 112     onHide : function(){
 113         Roo.tree.TreeEditor.superclass.onHide.call(this);
 114         if(this.editNode){
 115             this.editNode.ui.focus();
 116         }
 117     },
 118
 119     // private
 120     onSpecialKey : function(field, e){
 121         var k = e.getKey();
 122         if(k == e.ESC){
 123             e.stopEvent();
 124             this.cancelEdit();
 125         }else if(k == e.ENTER && !e.hasModifier()){
 126             e.stopEvent();
 127             this.completeEdit();
 128         }
 129     }
 130 });