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