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