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

Event Registration Please avoid DOM level 0 event registration by NOT placing your event handlers in-line link 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

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