Roo/tree/TreeEditor.js

/*
 * Based on:
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 *
 * Originally Released Under LGPL - original licence link has changed is not relivant.
 *
 * Fork - LGPL
 * <script type="text/javascript">
 */
/**
 * @class Roo.tree.TreeEditor
 * @extends Roo.Editor
 * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
 * as the editor field.
 * @constructor
 * @param {Object} config (used to be the tree panel.)
 * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
 * 
 * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
 * @cfg {Roo.form.TextField|Object} field The field configuration
 *
 * 
 */
Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
    var tree = config;
    var field;
    if (oldconfig) { // old style..
        field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
    } else {
        // new style..
        tree = config.tree;
        config.field = config.field  || {};
        config.field.xtype = 'TextField';
        field = Roo.factory(config.field, Roo.form);
    }
    config = config || {};


    this.addEvents({
        /**
         * @event beforenodeedit
         * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
         * false from the handler of this event.
         * @param {Editor} this
         * @param {Roo.tree.Node} node 
         */
        "beforenodeedit" : true
    });

    //Roo.log(config);
    Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);

    this.tree = tree;

    tree.on('beforeclick', this.beforeNodeClick, this);
    tree.getTreeEl().on('mousedown', this.hide, this);
    this.on('complete', this.updateNode, this);
    this.on('beforestartedit', this.fitToTree, this);
    this.on('startedit', this.bindScroll, this, {delay:10});
    this.on('specialkey', this.onSpecialKey, this);
};

Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
    /**
     * @cfg {String} alignment
     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
     */
    alignment: "l-l",
    // inherit
    autoSize: false,
    /**
     * @cfg {Boolean} hideEl
     * True to hide the bound element while the editor is displayed (defaults to false)
     */
    hideEl : false,
    /**
     * @cfg {String} cls
     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
     */
    cls: "x-small-editor x-tree-editor",
    /**
     * @cfg {Boolean} shim
     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
     */
    shim:false,
    // inherit
    shadow:"frame",
    /**
     * @cfg {Number} maxWidth
     * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
     * the containing tree element's size, it will be automatically limited for you to the container width, taking
     * scroll and client offsets into account prior to each edit.
     */
    maxWidth: 250,

    editDelay : 350,

    // private
    fitToTree : function(ed, el){
        var td = this.tree.getTreeEl().dom, nd = el.dom;
        if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
            td.scrollLeft = nd.offsetLeft;
        }
        var w = Math.min(
                this.maxWidth,
                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
        this.setSize(w, '');

        return this.fireEvent('beforenodeedit', this, this.editNode);

    },

    // private
    triggerEdit : function(node){
        this.completeEdit();
        this.editNode = node;
        this.startEdit(node.ui.textNode, node.text);
    },

    // private
    bindScroll : function(){
        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
    },

    // private
    beforeNodeClick : function(node, e){
        var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
        this.lastClick = new Date();
        if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
            e.stopEvent();
            this.triggerEdit(node);
            return false;
        }
        return true;
    },

    // private
    updateNode : function(ed, value){
        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
        this.editNode.setText(value);
    },

    // private
    onHide : function(){
        Roo.tree.TreeEditor.superclass.onHide.call(this);
        if(this.editNode){
            this.editNode.ui.focus();
        }
    },

    // private
    onSpecialKey : function(field, e){
        var k = e.getKey();
        if(k == e.ESC){
            e.stopEvent();
            this.cancelEdit();
        }else if(k == e.ENTER && !e.hasModifier()){
            e.stopEvent();
            this.completeEdit();
        }
    }
});