Clear Up
SharpKit Reference

Editor Class

The Editor class is used to provide inline editing for elements on the page. The editor is backed by a 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:

  • completeOnEnter
  • cancelOnEsc
  • swallowKeys

It also has options for how to use the value once the editor has been activated:

  • revertInvalid
  • ignoreNoChange
  • 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.

Namespace: Ext



Name Description
alignment The position to align to (see Ext.Element.alignTo for more details). Defaults to: "c-c?"
allowBlur True to complete the editing process if in edit mode when the field is blurred. Defaults to: true
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
cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to: true
completeOnEnter True to complete the edit when the enter key is pressed. Defaults to: true
constrain True to constrain the editor to the viewport Defaults to: false
field The Field object (or descendant) or config object for field
hideEl False to keep the bound element visible while the editor is displayed Defaults to: true
ignoreNoChange 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. Defaults to: false
offsets The offsets to use when aligning (see Ext.Element.alignTo for more details. Defaults to: [0, 0]
parentEl An element to render to. Defaults to: document.body
revertInvalid True to automatically revert the field value and cancel the edit when the user completes an edit and the field validation fails Defaults to: true
swallowKeys Handle the keydown/keypress events so they don't propagate Defaults to: true
updateEl True to update the innerHTML of the bound element when the update completes Defaults to: false
value The data value of the underlying field Defaults to: ""


Name Description
cancelEdit(object) Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to the original starting value.
completeEdit(object) Ends the editing process, persists the changed value to the underlying field, and hides the editor.
getValue() Gets the data value of the editor
realign(object) Realigns the editor to the bound field based on the current alignment config value.
setValue(object) Sets the data value of the editor
startEdit(object, object) Starts the editing process and shows the editor.
© Copyright 2005-2011 SharpKit. All rights reserved.