Ext Js Events
Download as PPT, PDF8 likes3,506 views
Events describe actions that occur and provide information about what happened. ExtJS normalizes event handling across browsers. Classes that expose events inherit from Observable which allows subscriber objects to be notified of events.
Ext Js Events
- 1. ExtJS Events 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