www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext2/source/widgets/tree/TreeEditor.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * http://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; if(!tree.rendered){ tree.on('render', this.initEditor, this); }else{ this.initEditor(tree); } }; 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, /** * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger * editing on the current node (defaults to 350). If two clicks occur on the same node within this time span, * the editor for the node will display, otherwise it will be processed as a regular click. */ editDelay : 350, initEditor : function(tree){ tree.on('beforeclick', this.beforeNodeClick, this); tree.on('dblclick', this.onNodeDblClick, 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); }, // 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, defer){ this.completeEdit(); if(node.attributes.editable !== false){ this.editNode = node; this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]); return false; } }, // private bindScroll : function(){ this.tree.getTreeEl().on('scroll', this.cancelEdit, this); }, // private beforeNodeClick : function(node, e){ clearTimeout(this.autoEditTimer); if(this.tree.getSelectionModel().isSelected(node)){ e.stopEvent(); return this.triggerEdit(node); } }, onNodeDblClick : function(node, e){ clearTimeout(this.autoEditTimer); }, // 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.defer(50, this.editNode.ui); } }, // 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(); } } });