ExtJS Events

1. ExtJSEvents By Aaron Conran

2. 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

3. 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

4. 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!

5. 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);

6. 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.

7. 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

8. 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)

9. 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.

10. 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(); },

11. 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.

12. 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

13. 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