/** * @class Ext.Editor * @extend Ext.Container * @xtype editor * * 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: * * @example * var form = Ext.create('Ext.form.Panel', { * renderTo: Ext.getBody(), * width: 380, * height: 400, * title: 'User Details', * bodyPadding: 10, * items: [{ * html: 'Double-Click on the header title, this, or the field label to edit', * height:30 * },{ * fieldLabel: 'First Name', * name: 'firstname', * xtype: 'textfield' * }] * }); * * var editor = new Ext.Editor({ * // update the innerHTML of the bound element * // when editing completes * updateEl: true, * alignment: 'l-l', * autoSize: { * width: 'boundEl' * }, * field: { * xtype: 'textfield' * } * }); * * form.header.getTitle().textEl.on('dblclick', function(e, t) { * editor.startEdit(t); * }); * * form.getTargetEl().on('dblclick', function(e, t) { * editor.startEdit(t); * // Manually focus, since clicking on the label will focus the text field * editor.getField().focus(50, true); * }); * * {@img Ext.Editor/Ext.Editor.png Ext.Editor component} * */ /** * @cfg {Object} field * Config object for a {@link Ext.field.Field} * @accessor */ /** * @cfg {Boolean} [allowBlur=true] * True to {@link #completeEdit complete the editing process} if in edit mode when focus exits from this Editor's hierarchy. */ /** * @cfg {Boolean} [revertInvalid=true] * True to automatically revert the field value and cancel the edit when the user completes an edit and the field * validation fails */ /** * @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 */ /** * @cfg {String} [alignment=c-c?] * The position to align to (see {@link Ext.util.Positionable#alignTo} for more details). */ /** * @cfg {Number[]} [offset=[0,0]] * The offset to use when aligning (see {@link Ext.util.Positionable#alignTo} for more details. */ /** * @cfg {Boolean/String} [shadow='frame'] * "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow. */ /** * @cfg {Boolean} [constrain=false] * True to constrain the editor to the viewport */ /** * @cfg {Boolean} [swallowKeys=true] * Handle the keydown/keypress events so they don't propagate */ /** * @cfg {Boolean} [completeOnEnter=true] * True to complete the edit when the enter key is pressed. */ /** * @cfg {Boolean} [cancelOnEsc=true] * True to cancel the edit when the escape key is pressed. */ /** * @cfg {Boolean} [cancelOnClear=false] * True to cancel edit when the clear icon of a field is pressed */ /** * @cfg {Boolean} [updateEl=false] * True to update the innerHTML of the bound element when the update completes */ /** * @cfg {String/HTMLElement/Ext.dom.Element} [parentEl=document.body] * An element to render to. */ /** * @property {Boolean} [editing=false] * True if this editor is currently active. * @readonly */ /** * @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.dom.Element} boundEl The underlying element bound to this editor * @param {Object} value The field value being set */ /** * @event startedit * Fires when this editor is displayed * @param {Ext.Editor} this * @param {Ext.dom.Element} boundEl The underlying element bound to this editor * @param {Object} value The starting field value */ /** * @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 */ /** * @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 */ /** * @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 */ /** * @event specialkey * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check * {@link Ext.event.Event#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.event.Event} event The event object */ /** * @cfg {Boolean} [matchFont=false] * Determines if the editor input should match the font style of the target element */ /** * @method getValue * Gets the data value of the editor * @return {Object} The data value */ /** * @method setValue * Sets the data value of the editor * @param {Object} value Any valid value supported by the underlying field */