For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

Sencha Documentation

Just as Ext.core.Element wraps around a native DOM node, Ext.EventObject wraps the browser's native event-object normalizing cross-browser differences, such as which mouse button is clicked, keys pressed, mechanisms to stop event-propagation along with a method to prevent default actions from taking place.

For example:

function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
    e.preventDefault();
    var target = e.getTarget(); // same as t (the target HTMLElement)
    ...
}

var myDiv = Ext.get("myDiv");  // get reference to an Ext.core.Element
myDiv.on(         // 'on' is shorthand for addListener
    "click",      // perform an action on click of myDiv
    handleClick   // reference to the action handler
);

// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
Defined By

Properties

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

 

Key constant

Key constant

Defined By

Methods

 

Gets the character code for the event.

Gets the character code for the event.

Returns

  • Number   
 

Returns a normalized keyCode for the event.

Returns a normalized keyCode for the event.

Returns

  • Number   

    The key code

 

Gets the x coordinate of the event.

Gets the x coordinate of the event.

Returns

  • Number   

    @deprecated 4.0 Replaced by getX

 

Gets the y coordinate of the event.

Gets the y coordinate of the event.

Returns

  • Number   

    @deprecated 4.0 Replaced by getY

 

Returns a point object that consists of the object coordinates.

Returns a point object that consists of the object coordinates.

Returns

  • Ext.util.Point   

    point

 
getRelatedTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl]) : HTMLElement

Gets the related target.

Gets the related target.

Parameters

  • selector : String

    (optional) A simple selector to filter the target or look for an ancestor of the target

  • maxDepth : Number/Mixed

    (optional) The max depth to search as a number or element (defaults to 10 || document.body)

  • returnEl : Boolean

    (optional) True to return a Ext.core.Element object instead of DOM node

Returns

  • HTMLElement   
 
getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl]) : HTMLelement

Gets the target for the event.

Gets the target for the event.

Parameters

  • selector : String

    (optional) A simple selector to filter the target or look for an ancestor of the target

  • maxDepth : Number/Mixed

    (optional) The max depth to search as a number or element (defaults to 10 || document.body)

  • returnEl : Boolean

    (optional) True to return a Ext.core.Element object instead of DOM node

Returns

  • HTMLelement   
 

Normalizes mouse wheel delta across browsers

Normalizes mouse wheel delta across browsers

Returns

  • Number   

    The delta

 

Gets the x coordinate of the event.

Gets the x coordinate of the event.

Returns

  • Number   
 

Gets the page coordinates of the event.

Gets the page coordinates of the event.

Returns

  • Array   

    The xy values like [x, y]

 

Gets the y coordinate of the event.

Gets the y coordinate of the event.

Returns

  • Number   
 

Returns true if the control, meta, shift or alt key was pressed during this event.

Returns true if the control, meta, shift or alt key was pressed during this event.

Returns

  • Boolean   
 
injectEvent( Element/HTMLElement target) : void
Injects a DOM event using the data in this object and (optionally) a new target. This is a low-level technique and no...

Injects a DOM event using the data in this object and (optionally) a new target. This is a low-level technique and not likely to be used by application code. The currently supported event types are:

HTMLEvents

  • load
  • unload
  • select
  • change
  • submit
  • reset
  • resize
  • scroll

MouseEvents

  • click
  • dblclick
  • mousedown
  • mouseup
  • mouseover
  • mousemove
  • mouseout

UIEvents

  • focusin
  • focusout
  • activate
  • focus
  • blur

Parameters

  • target : Element/HTMLElement

    If specified, the target for the event. This is likely to be used when relaying a DOM event. If not specified, getTarget is used to determine the target.

Returns

  • void   
 

Checks if the key pressed was a "navigation" key

Checks if the key pressed was a "navigation" key

Returns

  • Boolean   

    True if the press is a navigation keypress

 

Checks if the key pressed was a "special" key

Checks if the key pressed was a "special" key

Returns

  • Boolean   

    True if the press is a special keypress

 

Prevents the browsers default handling of the event.

Prevents the browsers default handling of the event.

Returns

  • void   
 

Stop the event (preventDefault and stopPropagation)

Stop the event (preventDefault and stopPropagation)

Returns

  • void   
 

Cancels bubbling of the event.

Cancels bubbling of the event.

Returns

  • void   
 
within( Mixed el, [Boolean related], Boolean allowEl) : Boolean
Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false...

Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el. Example usage:

// Handle click on any child of an element
Ext.getBody().on('click', function(e){
    if(e.within('some-el')){
        alert('Clicked on a child of some-el!');
    }
});

// Handle click directly on an element, ignoring clicks on child nodes
Ext.getBody().on('click', function(e,t){
    if((t.id == 'some-el') && !e.within(t, true)){
        alert('Clicked directly on some-el!');
    }
});

Parameters

  • el : Mixed

    The id, DOM element or Ext.core.Element to check

  • related : Boolean

    (optional) true to test if the related target is within el instead of the target

  • allowEl : Boolean

    {optional} true to also check if the passed element is the target or related target

Returns

  • Boolean