ext js events
DESCRIPTION
[email protected]TRANSCRIPT
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