Print Friendly

# Class Ext.Editor

Package: | Ext
Class: | Editor
Extends: | Component
Defined In: | Editor.js

A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
Properties - Methods - Events - Config Options

## Public Properties

Property | Defined By
--- | ---
| disabled : Object | Component
true if this component is disabled. Read-only.
| disabledClass : Object | Component
CSS class added to the component when it is disabled.
| hidden : Object | Component
true if this component is hidden. Read-only.
| rendered : Object | Component
true if this component has been rendered. Read-only.

## Public Methods

Method | Defined By
--- | ---
| Editor(`Object config`) | Editor
Create a new Editor
| addEvents(`Object object`) : void | Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void | Observable
Appends an event handler to this component
| cancelEdit(`Boolean remainVisible`) : void | Editor
Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to...
| completeEdit(`Boolean remainVisible`) : void | Editor
Ends the editing process, persist the changed value to the underlying field and hides the editor.
| disable() : void | Component
Disable this component
| enable() : void | Component
Enable this component
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| focus(`Boolean selectText`) : void | Component
Try to focus this component
| getEl() : Ext.Element | Component
Returns the underlying Ext.Element
| getId() : String | Component
Returns the id of this component
| getValue() : Mixed | Editor
Gets the data value of the editor
| hasListener(`String eventName`) : Boolean | Observable
Checks to see if this object is currently listening for a specified event
| hide() : void | Component
Hide this component
| isVisible() : void | Component
Returns true if this component is visible
| on(`String eventName`, `Function handler`, [`Object options`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| realign() : void | Editor
Realigns the editor to the bound field based on the current alignment config value.
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| render([`String/HTMLElement/Element container`]) : void | Component
If this is a lazy rendering component, render it to its container element
| setDisabled(`Boolean disabled`) : void | Component
Convenience function for setting disabled/enabled by boolean
| setSize(`Number width`, `Number height`) : void | Editor
Sets the height and width of this editor
| setValue(`Mixed value`) : void | Editor
Sets the data value of the editor
| setVisible(`Boolean visible`) : void | Component
Convenience function to hide or show this component by boolean
| show() : void | Component
Show this component
| un(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener (shorthand for removeListener)

## Public Events

Event | Defined By
--- | ---
| beforecomplete : (`Editor this`, `Mixed value`, `Mixed startValue`) | Editor
Fires after a change has been made to the field, but before the change is reflected in the underlying field. Saving ...
| beforedestroy : (`Ext.Component this`) | Component
Fires before the component is destroyed
| beforehide : (`Ext.Component this`) | Component
Fires before the component is hidden
| beforerender : (`Ext.Component this`) | Component
Fires before the component is rendered
| beforeshow : (`Ext.Component this`) | Component
Fires before the component is shown
| beforestartedit : (`Editor this`, `Ext.Element boundEl`, `Mixed value`) | Editor
Fires when editing is initiated, but before the value changes. Editing can be canceled by returning false from the h...
| complete : (`Editor this`, `Mixed value`, `Mixed startValue`) | Editor
Fires after editing is complete and any changed value has been written to the underlying field.
| destroy : (`Ext.Component this`) | Component
Fires after the component is destroyed
| disable : (`Ext.Component this`) | Component
Fires after the component is disabled
| enable : (`Ext.Component this`) | Component
Fires after the component is enabled
| hide : (`Ext.Component this`) | Component
Fires after the component is hidden
| render : (`Ext.Component this`) | Component
Fires after the component is rendered
| show : (`Ext.Component this`) | Component
Fires after the component is shown
| specialkey : () | Editor
Fires when special key is pressed
| startedit : (`Ext.Element boundEl`, `Mixed value`) | Editor
Fires when this editor is displayed

## Config Options

Config Options | Defined By
--- | ---
| alignment : String | Editor
The position to align to (see Ext.Element.alignTo for more details, defaults to "c-c?").
| autosize : Boolean/String | Editor
True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, or "hei...
| ignoreNoChange : Boolean | Editor
True to skip the the edit completion process (no save, no events fired) if the user completes an edit and the value h...
| revertInvalid : Boolean | Editor
True to automatically revert the field value and cancel the edit when the user completes an edit and the field valida...
| shadow : Boolean/String | Editor
"sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
| value : Mixed | Editor
The data value of the underlying field (defaults to "")

## Property Details

### disabled

`public Object disabled`
true if this component is disabled. Read-only.
This property is defined by Component.

### disabledClass

`public Object disabledClass`
CSS class added to the component when it is disabled.
This property is defined by Component.

### hidden

`public Object hidden`
true if this component is hidden. Read-only.
This property is defined by Component.

### rendered

`public Object rendered`
true if this component has been rendered. Read-only.
This property is defined by Component.

## Constructor Details

### Editor

`public function Editor(`Object config`)`
Create a new Editor
Parameters:

- `config` : Object
  The config object

## Method Details

### addEvents

`public function addEvents(`Object object`)`
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:

- `object` : Object
  The object from which to copy events

Returns:

- `void`

This method is defined by Observable.

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`])`
Appends an event handler to this component
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
  - delegate {String} A simple selector to filter the target or look for a descendant of the target
  - stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
  - preventDefault {Boolean} True to prevent the default action
  - stopPropagation {Boolean} True to prevent event propagation
  - normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
  - delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
  - single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
  - buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

  Code:

      el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

  The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

  Attaching multiple handlers in 1 call
  Code:

      el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

  Or a shorthand syntax:
  Code:

      el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });

Returns:

- `void`

This method is defined by Observable.

### cancelEdit

`public function cancelEdit(`Boolean remainVisible`)`
Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to the original starting value.
Parameters:

- `remainVisible` : Boolean
  Override the default behavior and keep the editor visible after cancel (defaults to false)

Returns:

- `void`

This method is defined by Editor.

### completeEdit

`public function completeEdit(`Boolean remainVisible`)`
Ends the editing process, persist the changed value to the underlying field and hides the editor.
Parameters:

- `remainVisible` : Boolean
  Override the default behavior and keep the editor visible after edit (defaults to false)

Returns:

- `void`

This method is defined by Editor.

### disable

`public function disable()`
Disable this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### enable

`public function enable()`
Enable this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### focus

`public function focus(`Boolean selectText`)`
Try to focus this component
Parameters:

- `selectText` : Boolean
  True to also select the text in this component (if applicable)

Returns:

- `void`

This method is defined by Component.

### getEl

`public function getEl()`
Returns the underlying Ext.Element
Parameters:

- None.

Returns:

- `Ext.Element`
  The element

This method is defined by Component.

### getId

`public function getId()`
Returns the id of this component
Parameters:

- None.

Returns:

- `String`

This method is defined by Component.

### getValue

`public function getValue()`
Gets the data value of the editor
Parameters:

- None.

Returns:

- `Mixed`
  value The data value

This method is defined by Editor.

### hasListener

`public function hasListener(`String eventName`)`
Checks to see if this object is currently listening for a specified event
Parameters:

- `eventName` : String
  The name of the event to check for

Returns:

- `Boolean`
  True if the event is being listened for, else false

This method is defined by Observable.

### hide

`public function hide()`
Hide this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### isVisible

`public function isVisible()`
Returns true if this component is visible
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### on

`public function on(`String eventName`, `Function handler`, [`Object options`])`
Appends an event handler to this element (shorthand for addListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `options` : Object
  (optional)

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### realign

`public function realign()`
Realigns the editor to the bound field based on the current alignment config value.
Parameters:

- None.

Returns:

- `void`

This method is defined by Editor.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### render

`public function render([`String/HTMLElement/Element container`])`
If this is a lazy rendering component, render it to its container element
Parameters:

- `container` : String/HTMLElement/Element
  (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.

Returns:

- `void`

This method is defined by Component.

### setDisabled

`public function setDisabled(`Boolean disabled`)`
Convenience function for setting disabled/enabled by boolean
Parameters:

- `disabled` : Boolean

Returns:

- `void`

This method is defined by Component.

### setSize

`public function setSize(`Number width`, `Number height`)`
Sets the height and width of this editor
Parameters:

- `width` : Number
  The new width
- `height` : Number
  The new height

Returns:

- `void`

This method is defined by Editor.

### setValue

`public function setValue(`Mixed value`)`
Sets the data value of the editor
Parameters:

- `value` : Mixed
  Any valid value supported by the underlying field

Returns:

- `void`

This method is defined by Editor.

### setVisible

`public function setVisible(`Boolean visible`)`
Convenience function to hide or show this component by boolean
Parameters:

- `visible` : Boolean
  True to show, false to hide

Returns:

- `void`

This method is defined by Component.

### show

`public function show()`
Show this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### un

`public function un(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener (shorthand for removeListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

## Event Details

### beforecomplete

`public 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.
Subscribers will be called with the following parameters:

- `this` : Editor
- `value` : Mixed
  The current field value
- `startValue` : Mixed
  The original field value

This event is defined by Editor.

### beforedestroy

`public event beforedestroy`
Fires before the component is destroyed
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforehide

`public event beforehide`
Fires before the component is hidden
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforerender

`public event beforerender`
Fires before the component is rendered
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforeshow

`public event beforeshow`
Fires before the component is shown
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforestartedit

`public 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.
Subscribers will be called with the following parameters:

- `this` : Editor
- `boundEl` : Ext.Element
  The underlying element bound to this editor
- `value` : Mixed
  The field value being set

This event is defined by Editor.

### complete

`public event complete`
Fires after editing is complete and any changed value has been written to the underlying field.
Subscribers will be called with the following parameters:

- `this` : Editor
- `value` : Mixed
  The current field value
- `startValue` : Mixed
  The original field value

This event is defined by Editor.

### destroy

`public event destroy`
Fires after the component is destroyed
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### disable

`public event disable`
Fires after the component is disabled
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### enable

`public event enable`
Fires after the component is enabled
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### hide

`public event hide`
Fires after the component is hidden
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### render

`public event render`
Fires after the component is rendered
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### show

`public event show`
Fires after the component is shown
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### specialkey

`public event specialkey`
Fires when special key is pressed
Subscribers will be called with the following parameters:

- None.

This event is defined by Editor.

### startedit

`public event startedit`
Fires when this editor is displayed
Subscribers will be called with the following parameters:

- `boundEl` : Ext.Element
  The underlying element bound to this editor
- `value` : Mixed
  The starting field value

This event is defined by Editor.

## Config Details

### alignment

`alignment : String`
The position to align to (see Ext.Element.alignTo for more details, defaults to "c-c?").
This config option is defined by Editor.

### autosize

`autosize : Boolean/String`
True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only, or "height" to adopt the height only (defaults to false)
This config option is defined by Editor.

### ignoreNoChange

`ignoreNoChange : Boolean`
True to skip the the edit completion process (no save, no events fired) if the user completes an edit and the value has not changed (defaults to false). Applies only to string values - edits for other data types will never be ignored.
This config option is defined by Editor.

### revertInvalid

`revertInvalid : Boolean`
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)
This config option is defined by Editor.

### shadow

`shadow : Boolean/String`
"sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
This config option is defined by Editor.

### value

`value : Mixed`
The data value of the underlying field (defaults to "")
This config option is defined by Editor.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.