ExtJS Events

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 4 months ago)

252 views

ExtJS

Events

By Aaron Conran

Events


Events describe
when
a certain action
happens. This could be a user action, a
response to an Ajax call, etc.


Events also provide us with some
information about
what
occurred via
arguments

Events


The DOM model describes numerous events
which may occur to an HTMLElement.


Such as:


mousedown


mouseover


click


select


blur


focus


change



http://www.w3.org/TR/DOM
-
Level
-
2
-
Events/events.html

Event Registration


Please avoid DOM level 0 event
registration by NOT placing your event
handlers in
-
line

<a href=“” onclick=“return myFunction()”>link</a>


Event handling like this has been
deprecated for some time and using it in
dynamic applications may cause memory
leaks!

Event
-
handling


ExtJS normalizes event
-
handling
differences across the browsers.


To add an event handler to an event we
use the following syntax.


Ext.fly(‘myElement’).on(‘click’, myFunction, scope);



To remove an event handler to an event
we use the following syntax.


Ext.fly(‘myElement’).un(‘click’, myFunction, scope);




Event handling


When using Ext.Element all standard
HTMLElement events are exposed.


The called function will receive 2
arguments.


event


This is Ext.EventObject which
normalizes event information cross
-
browser


target


This is an HTMLElement which
desribes the
target

which was clicked.

Events


All classes which expose
events

inherit
from Ext.util.Observable.


Observable is a design pattern which
allows a
subject object

to notify zero to
many
subscriber objects


The subscribers are not guaranteed to be
called in any order

http://en.wikipedia.org/wiki/Observer_pattern



Events


Events
tell their subscribers about
when
and
what
happened.


Subscribers can react appropriately
without knowing
why

an event occurred.


Refer to the ExtJS Documentation when
you want to know what arguments you will
be passed.


(Click Events link at the top of each class)



Example ExtJS Docs


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.

this
.editItemNumber.on('complete',






this
.commitRecord,




this
);


commitRecord :
function
(
ed
,
value
, oldValue) {

var

boundElDom =
ed
.boundEl.dom;

var

recordId = boundElDom.parentNode.id;

var

currRecord =
this
.store.getById(recordId);

var

cn = boundElDom.className;

currRecord.set(cn,
value
);

currRecord.commit();

this
.refresh();

},

ExtJS Events


Many ExtJS classes expose
before events

which will allow you to cancel an action by
returning false.


Ex:

ds.on(‘beforeload’, function(ds, opts) {return false;});



In a real situation we would make an
intelligent decision given ds and opts to
cancel the load event.

What’s next?


We will be covering how to create our own
observable classes.


This will allow us to easily communicate
between other classes.


For a full discourse on how event handling
works in the DOM read Events and Event
Handling in
JavaScript:

The Definitive Guide
(p388


436)


All of these cross
-
browser discrepancies are
eliminated by ExtJS


Next Class


If you don’t want to read the whole
chapter, look up the following concepts.


Dom Level 2 Event Handling


Propagation


Bubbling


Default action


Related target