Ext Js Events

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

http://podlipensky.com	3862
http://www.extjswithrails.com	582
http://maxycws.blogspot.com	475
http://www.slideshare.net	194
http://maxyc.ru	83
http://misdo.tumblr.com	64
http://localhost	19
http://translate.googleusercontent.com	2
http://www.maxyc.ru	2
http://hghltd.yandex.net	2
http://rssnews.org.ua	1
http://209.85.135.132	1
http://www.podlipensky.com	1
http://74.125.47.132	1
http://webcache.googleusercontent.com	1
http://74.125.39.104	1
http://64.233.179.104	1
http://ls.maxyc.ru	1

Ext Js Events

by sdhjl2000 on Nov 01, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 5,293

Statistics

Ext Js Events — Presentation Transcript