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