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