/*
 * Ext JS Library 1.1 RC 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

/** * @class Ext.tree.TreeEditor * @extends Ext.Editor * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} can be used * as the editor field. * @constructor * @param {TreePanel} tree * @param {Object} config Either a prebuilt {@link Ext.form.Field} instance or a Field config object */Ext.tree.TreeEditor = function(tree, config){    config = config || {};    var field = config.events ? config : new Ext.form.TextField(config);    Ext.tree.TreeEditor.superclass.constructor.call(this, field);    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);};Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {    /**     * @cfg {String} alignment     * The position to align to (see {@link Ext.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, '');    },    // 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;        }    },    // private    updateNode : function(ed, value){        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);        this.editNode.setText(value);    },    // private    onHide : function(){        Ext.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();        }    }});