/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* The Editor class is used to provide inline editing for elements on the page. The editor
* is backed by a {@link Ext.form.field.Field} that will be displayed to edit the underlying content.
* The editor is a floating Component, when the editor is shown it is automatically aligned to
* display over the top of the bound element it is editing. The Editor contains several options
* for how to handle key presses:
*
* - {@link #completeOnEnter}
* - {@link #cancelOnEsc}
* - {@link #swallowKeys}
*
* It also has options for how to use the value once the editor has been activated:
*
* - {@link #revertInvalid}
* - {@link #ignoreNoChange}
* - {@link #updateEl}
*
* Sample usage:
*
* var editor = new Ext.Editor({
* updateEl: true, // update the innerHTML of the bound element when editing completes
* field: {
* xtype: 'textfield'
* }
* });
* var el = Ext.get('my-text'); // The element to 'edit'
* editor.startEdit(el); // The value of the field will be taken as the innerHTML of the element.
*
* {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
*
*/
Ext.define('Ext.Editor', {
/* Begin Definitions */
extend: 'Ext.container.Container',
alias: 'widget.editor',
requires: ['Ext.layout.container.Editor'],
/* End Definitions */
layout: 'editor',
/**
* @cfg {Ext.form.field.Field} field
* The Field object (or descendant) or config object for field
*/
/**
* @cfg {Boolean} allowBlur
* True to {@link #completeEdit complete the editing process} if in edit mode when the
* field is blurred.
*/
allowBlur: true,
/**
* @cfg {Boolean/Object} autoSize
* True for the editor to automatically adopt the size of the underlying field. Otherwise, an object
* can be passed to indicate where to get each dimension. The available properties are 'boundEl' and
* 'field'. If a dimension is not specified, it will use the underlying height/width specified on
* the editor object.
* Examples:
*
* autoSize: true // The editor will be sized to the height/width of the field
*
* height: 21,
* autoSize: {
* width: 'boundEl' // The width will be determined by the width of the boundEl, the height from the editor (21)
* }
*
* autoSize: {
* width: 'field', // Width from the field
* height: 'boundEl' // Height from the boundEl
* }
*/
/**
* @cfg {Boolean} revertInvalid
* True to automatically revert the field value and cancel the edit when the user completes an edit and the field
* validation fails
*/
revertInvalid: true,
/**
* @cfg {Boolean} [ignoreNoChange=false]
* True to skip the edit completion process (no save, no events fired) if the user completes an edit and
* the value has not changed. Applies only to string values - edits for other data types
* will never be ignored.
*/
/**
* @cfg {Boolean} [hideEl=true]
* False to keep the bound element visible while the editor is displayed
*/
/**
* @cfg {Object} value
* The data value of the underlying field
*/
value : '',
/**
* @cfg {String} alignment
* The position to align to (see {@link Ext.util.Positionable#alignTo} for more details).
*/
alignment: 'c-c?',
/**
* @cfg {Number[]} offsets
* The offsets to use when aligning (see {@link Ext.util.Positionable#alignTo} for more details.
*/
offsets: [0, 0],
/**
* @cfg {Boolean/String} shadow
* "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow.
*/
shadow : 'frame',
/**
* @cfg {Boolean} constrain
* True to constrain the editor to the viewport
*/
constrain : false,
/**
* @cfg {Boolean} swallowKeys
* Handle the keydown/keypress events so they don't propagate
*/
swallowKeys : true,
/**
* @cfg {Boolean} completeOnEnter
* True to complete the edit when the enter key is pressed.
*/
completeOnEnter : true,
/**
* @cfg {Boolean} cancelOnEsc
* True to cancel the edit when the escape key is pressed.
*/
cancelOnEsc : true,
/**
* @cfg {Boolean} updateEl
* True to update the innerHTML of the bound element when the update completes
*/
updateEl : false,
// Do not participate in the ZIndexManager's focus switching operations.
// When an editor is hidden, the ZIndexManager will not automatically activate
// the last visible floater on the stack.
focusOnToFront: false,
/**
* @cfg {String/HTMLElement/Ext.Element} [parentEl=document.body]
* An element to render to.
*/
// private overrides
hidden: true,
baseCls: Ext.baseCSSPrefix + 'editor',
initComponent : function() {
var me = this,
field = me.field = Ext.ComponentManager.create(me.field, 'textfield');
Ext.apply(field, {
inEditor: true,
msgTarget: field.msgTarget == 'title' ? 'title' : 'qtip'
});
me.mon(field, {
scope: me,
blur: me.onFieldBlur,
specialkey: me.onSpecialKey
});
if (field.grow) {
me.mon(field, 'autosize', me.onFieldAutosize, me, {delay: 1});
}
me.floating = {
constrain: me.constrain
};
me.items = field;
me.callParent(arguments);
me.addEvents(
/**
* @event beforestartedit
* Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
* false from the handler of this event.
* @param {Ext.Editor} this
* @param {Ext.Element} boundEl The underlying element bound to this editor
* @param {Object} value The field value being set
*/
'beforestartedit',
/**
* @event startedit
* Fires when this editor is displayed
* @param {Ext.Editor} this
* @param {Ext.Element} boundEl The underlying element bound to this editor
* @param {Object} value The starting field value
*/
'startedit',
/**
* @event beforecomplete
* Fires after a change has been made to the field, but before the change is reflected in the underlying
* field. Saving the change to the field can be canceled by returning false from the handler of this event.
* Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
* event will not fire since no edit actually occurred.
* @param {Ext.Editor} this
* @param {Object} value The current field value
* @param {Object} startValue The original field value
*/
'beforecomplete',
/**
* @event complete
* Fires after editing is complete and any changed value has been written to the underlying field.
* @param {Ext.Editor} this
* @param {Object} value The current field value
* @param {Object} startValue The original field value
*/
'complete',
/**
* @event canceledit
* Fires after editing has been canceled and the editor's value has been reset.
* @param {Ext.Editor} this
* @param {Object} value The user-entered field value that was discarded
* @param {Object} startValue The original field value that was set back into the editor after cancel
*/
'canceledit',
/**
* @event specialkey
* Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
* {@link Ext.EventObject#getKey} to determine which key was pressed.
* @param {Ext.Editor} this
* @param {Ext.form.field.Field} field The field attached to this editor
* @param {Ext.EventObject} event The event object
*/
'specialkey'
);
},
// private
onFieldAutosize: function(){
this.updateLayout();
},
// private
afterRender : function(ct, position) {
var me = this,
field = me.field,
inputEl = field.inputEl;
me.callParent(arguments);
// Ensure the field doesn't get submitted as part of any form
if (inputEl) {
inputEl.dom.name = '';
if (me.swallowKeys) {
inputEl.swallowEvent([
'keypress', // *** Opera
'keydown' // *** all other browsers
]);
}
}
},
// private
onSpecialKey : function(field, event) {
var me = this,
key = event.getKey(),
complete = me.completeOnEnter && key == event.ENTER,
cancel = me.cancelOnEsc && key == event.ESC;
if (complete || cancel) {
event.stopEvent();
// Must defer this slightly to prevent exiting edit mode before the field's own
// key nav can handle the enter key, e.g. selecting an item in a combobox list
Ext.defer(function() {
if (complete) {
me.completeEdit();
} else {
me.cancelEdit();
}
if (field.triggerBlur) {
field.triggerBlur(event);
}
}, 10);
}
me.fireEvent('specialkey', me, field, event);
},
/**
* Starts the editing process and shows the editor.
* @param {String/HTMLElement/Ext.Element} el The element to edit
* @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
* to the innerHTML of el.
*/
startEdit : function(el, value) {
var me = this,
field = me.field;
me.completeEdit();
me.boundEl = Ext.get(el);
value = Ext.isDefined(value) ? value : Ext.String.trim(me.boundEl.dom.innerText || me.boundEl.dom.innerHTML);
if (!me.rendered) {
// Render to the ownerCt's element
// Being floating, we do not need to use the actual layout's target.
// Indeed, it's better if we do not so that we do not interfere with layout's child management,
// especially with CellEditors in the element of a TablePanel.
if (me.ownerCt) {
me.parentEl = me.ownerCt.el;
me.parentEl.position();
}
me.render(me.parentEl || document.body);
}
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
me.startValue = value;
me.show();
// temporarily suspend events on field to prevent the "change" event from firing when reset() and setValue() are called
field.suspendEvents();
field.reset();
field.setValue(value);
field.resumeEvents();
me.realign(true);
field.focus();
if (field.autoSize) {
field.autoSize();
}
me.editing = true;
}
},
/**
* Realigns the editor to the bound field based on the current alignment config value.
* @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
*/
realign : function(autoSize) {
var me = this;
if (autoSize === true) {
me.updateLayout();
}
me.alignTo(me.boundEl, me.alignment, me.offsets);
},
/**
* Ends the editing process, persists the changed value to the underlying field, and hides the editor.
* @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after edit
*/
completeEdit : function(remainVisible) {
var me = this,
field = me.field,
value;
if (!me.editing) {
return;
}
// Assert combo values first
if (field.assertValue) {
field.assertValue();
}
value = me.getValue();
if (!field.isValid()) {
if (me.revertInvalid !== false) {
me.cancelEdit(remainVisible);
}
return;
}
if (String(value) === String(me.startValue) && me.ignoreNoChange) {
me.hideEdit(remainVisible);
return;
}
if (me.fireEvent('beforecomplete', me, value, me.startValue) !== false) {
// Grab the value again, may have changed in beforecomplete
value = me.getValue();
if (me.updateEl && me.boundEl) {
me.boundEl.update(value);
}
me.hideEdit(remainVisible);
me.fireEvent('complete', me, value, me.startValue);
}
},
// private
onShow : function() {
var me = this;
me.callParent(arguments);
if (me.hideEl !== false) {
me.boundEl.hide();
}
me.fireEvent('startedit', me, me.boundEl, me.startValue);
},
/**
* Cancels the editing process and hides the editor without persisting any changes. The field value will be
* reverted to the original starting value.
* @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after cancel
*/
cancelEdit : function(remainVisible) {
var me = this,
startValue = me.startValue,
field = me.field,
value;
if (me.editing) {
value = me.getValue();
// temporarily suspend events on field to prevent the "change" event from firing when setValue() is called
field.suspendEvents();
me.setValue(startValue);
field.resumeEvents();
me.hideEdit(remainVisible);
me.fireEvent('canceledit', me, value, startValue);
}
},
// private
hideEdit: function(remainVisible) {
if (remainVisible !== true) {
this.editing = false;
this.hide();
}
},
// private
onFieldBlur : function(field, e) {
var me = this,
target = Ext.Element.getActiveElement();
// selectSameEditor flag allows the same editor to be started without onFieldBlur firing on itself
if(me.allowBlur === true && me.editing && me.selectSameEditor !== true) {
me.completeEdit();
}
// If newly active element is focusable, prevent reacquisition of focus by editor owner
if (Ext.fly(target).isFocusable() || target.getAttribute('tabIndex')) {
target.focus();
}
},
// private
onHide : function() {
var me = this,
field = me.field;
if (me.editing) {
me.completeEdit();
return;
}
// Fields which mimic blur have to be told to fire t heir blur events.
// All other types of field are automatically blurred when an ancestor hides.
if (field.hasFocus && field.triggerBlur) {
field.triggerBlur();
}
if (field.collapse) {
field.collapse();
}
//field.hide();
if (me.hideEl !== false) {
me.boundEl.show();
}
me.callParent(arguments);
},
/**
* Sets the data value of the editor
* @param {Object} value Any valid value supported by the underlying field
*/
setValue : function(value) {
this.field.setValue(value);
},
/**
* Gets the data value of the editor
* @return {Object} The data value
*/
getValue : function() {
return this.field.getValue();
},
beforeDestroy : function() {
var me = this;
Ext.destroy(me.field);
delete me.field;
delete me.parentEl;
delete me.boundEl;
me.callParent(arguments);
}
});
|
Download
