TreeEditor.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:5k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.tree.TreeEditor
  9.  * @extends Ext.Editor
  10.  * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} subclass can be used
  11.  * as the editor field.
  12.  * @constructor
  13.  * @param {TreePanel} tree
  14.  * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
  15.  * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
  16.  * @param {Object} config (optional) A TreeEditor config object
  17.  */
  18. Ext.tree.TreeEditor = function(tree, fc, config){
  19.     fc = fc || {};
  20.     var field = fc.events ? fc : new Ext.form.TextField(fc);
  21.     Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
  22.     this.tree = tree;
  23.     if(!tree.rendered){
  24.         tree.on('render', this.initEditor, this);
  25.     }else{
  26.         this.initEditor(tree);
  27.     }
  28. };
  29. Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
  30.     /**
  31.      * @cfg {String} alignment
  32.      * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
  33.      */
  34.     alignment: "l-l",
  35.     // inherit
  36.     autoSize: false,
  37.     /**
  38.      * @cfg {Boolean} hideEl
  39.      * True to hide the bound element while the editor is displayed (defaults to false)
  40.      */
  41.     hideEl : false,
  42.     /**
  43.      * @cfg {String} cls
  44.      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
  45.      */
  46.     cls: "x-small-editor x-tree-editor",
  47.     /**
  48.      * @cfg {Boolean} shim
  49.      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
  50.      */
  51.     shim:false,
  52.     // inherit
  53.     shadow:"frame",
  54.     /**
  55.      * @cfg {Number} maxWidth
  56.      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
  57.      * the containing tree element's size, it will be automatically limited for you to the container width, taking
  58.      * scroll and client offsets into account prior to each edit.
  59.      */
  60.     maxWidth: 250,
  61.     /**
  62.      * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
  63.      * editing on the current node (defaults to 350).  If two clicks occur on the same node within this time span,
  64.      * the editor for the node will display, otherwise it will be processed as a regular click.
  65.      */
  66.     editDelay : 350,
  67.     initEditor : function(tree){
  68.         tree.on('beforeclick', this.beforeNodeClick, this);
  69.         tree.on('dblclick', this.onNodeDblClick, this);
  70.         this.on('complete', this.updateNode, this);
  71.         this.on('beforestartedit', this.fitToTree, this);
  72.         this.on('startedit', this.bindScroll, this, {delay:10});
  73.         this.on('specialkey', this.onSpecialKey, this);
  74.     },
  75.     // private
  76.     fitToTree : function(ed, el){
  77.         var td = this.tree.getTreeEl().dom, nd = el.dom;
  78.         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
  79.             td.scrollLeft = nd.offsetLeft;
  80.         }
  81.         var w = Math.min(
  82.                 this.maxWidth,
  83.                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
  84.         this.setSize(w, '');
  85.     },
  86.     /**
  87.      * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
  88.      * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
  89.      */
  90.     triggerEdit : function(node, defer){
  91.         this.completeEdit();
  92. if(node.attributes.editable !== false){
  93.            /**
  94.             * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
  95.             * @type Ext.tree.TreeNode
  96.             * @property editNode
  97.             */
  98. this.editNode = node;
  99.             if(this.tree.autoScroll){
  100.                 Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
  101.             }
  102.             var value = node.text || '';
  103.             if (!Ext.isGecko && Ext.isEmpty(node.text)){
  104.                 node.setText(' ');
  105.             }
  106.             this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
  107.             return false;
  108.         }
  109.     },
  110.     // private
  111.     bindScroll : function(){
  112.         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
  113.     },
  114.     // private
  115.     beforeNodeClick : function(node, e){
  116.         clearTimeout(this.autoEditTimer);
  117.         if(this.tree.getSelectionModel().isSelected(node)){
  118.             e.stopEvent();
  119.             return this.triggerEdit(node);
  120.         }
  121.     },
  122.     onNodeDblClick : function(node, e){
  123.         clearTimeout(this.autoEditTimer);
  124.     },
  125.     // private
  126.     updateNode : function(ed, value){
  127.         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
  128.         this.editNode.setText(value);
  129.     },
  130.     // private
  131.     onHide : function(){
  132.         Ext.tree.TreeEditor.superclass.onHide.call(this);
  133.         if(this.editNode){
  134.             this.editNode.ui.focus.defer(50, this.editNode.ui);
  135.         }
  136.     },
  137.     // private
  138.     onSpecialKey : function(field, e){
  139.         var k = e.getKey();
  140.         if(k == e.ESC){
  141.             e.stopEvent();
  142.             this.cancelEdit();
  143.         }else if(k == e.ENTER && !e.hasModifier()){
  144.             e.stopEvent();
  145.             this.completeEdit();
  146.         }
  147.     }
  148. });