ExtJSEvents

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