ExtJS Events By Aaron Conran
Events <ul><li>Events describe  when  a certain action happens. This could be a user action, a response to an Ajax call, e...
Events <ul><li>The DOM model describes numerous events which may occur to an HTMLElement. </li></ul><ul><li>Such as: </li>...
Event Registration <ul><li>Please avoid DOM level 0 event registration by NOT placing your event handlers in-line </li></u...
Event-handling <ul><li>ExtJS normalizes event-handling differences across the browsers. </li></ul><ul><li>To add an event ...
Event handling <ul><li>When using Ext.Element all standard HTMLElement events are exposed. </li></ul><ul><li>The called fu...
Events <ul><li>All classes which expose  events  inherit from Ext.util.Observable. </li></ul><ul><li>Observable is a desig...
Events <ul><li>Events  tell their subscribers about  when  and  what  happened. </li></ul><ul><li>Subscribers can react ap...
Example ExtJS Docs <ul><li>complete </li></ul><ul><li>public event complete  </li></ul><ul><li>Fires after editing is comp...
this .editItemNumber.on('complete',   this .commitRecord,    this ); <ul><li>commitRecord :  function ( ed ,  value , oldV...
ExtJS Events <ul><li>Many ExtJS classes expose  before events  which will allow you to cancel an action by returning false...
What’s next? <ul><li>We will be covering how to create our own observable classes. </li></ul><ul><li>This will allow us to...
Next Class <ul><li>If you don’t want to read the whole chapter, look up the following concepts. </li></ul><ul><li>Dom Leve...
Upcoming SlideShare
Loading in …5
×

Ext Js Events

35,981 views

Published on

sdhjl2000@gmail.com

Published in: Technology



  • <b>[Comment posted from</b> http://podlipensky.com/post/2009/07/29/extjs-events.aspx]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ext Js Events

  1. 1. ExtJS Events By Aaron Conran
  2. 2. Events <ul><li>Events describe when a certain action happens. This could be a user action, a response to an Ajax call, etc. </li></ul><ul><li>Events also provide us with some information about what occurred via arguments </li></ul>
  3. 3. Events <ul><li>The DOM model describes numerous events which may occur to an HTMLElement. </li></ul><ul><li>Such as: </li></ul><ul><ul><li>mousedown </li></ul></ul><ul><ul><li>mouseover </li></ul></ul><ul><ul><li>click </li></ul></ul><ul><ul><li>select </li></ul></ul><ul><ul><li>blur </li></ul></ul><ul><ul><li>focus </li></ul></ul><ul><ul><li>change </li></ul></ul><ul><li>http://www.w3.org/TR/DOM-Level-2-Events/events.html </li></ul>
  4. 4. Event Registration <ul><li>Please avoid DOM level 0 event registration by NOT placing your event handlers in-line </li></ul><ul><ul><li><a href=“” onclick=“return myFunction()”>link</a> </li></ul></ul><ul><li>Event handling like this has been deprecated for some time and using it in dynamic applications may cause memory leaks! </li></ul>
  5. 5. Event-handling <ul><li>ExtJS normalizes event-handling differences across the browsers. </li></ul><ul><li>To add an event handler to an event we use the following syntax. </li></ul><ul><li>Ext.fly(‘myElement’).on(‘click’, myFunction, scope); </li></ul><ul><li>To remove an event handler to an event we use the following syntax. </li></ul><ul><li>Ext.fly(‘myElement’).un(‘click’, myFunction, scope); </li></ul>
  6. 6. Event handling <ul><li>When using Ext.Element all standard HTMLElement events are exposed. </li></ul><ul><li>The called function will receive 2 arguments. </li></ul><ul><ul><li>event – This is Ext.EventObject which normalizes event information cross-browser </li></ul></ul><ul><ul><li>target – This is an HTMLElement which desribes the target which was clicked. </li></ul></ul>
  7. 7. Events <ul><li>All classes which expose events inherit from Ext.util.Observable. </li></ul><ul><li>Observable is a design pattern which allows a subject object to notify zero to many subscriber objects </li></ul><ul><li>The subscribers are not guaranteed to be called in any order </li></ul><ul><li>http://en.wikipedia.org/wiki/Observer_pattern </li></ul>
  8. 8. Events <ul><li>Events tell their subscribers about when and what happened. </li></ul><ul><li>Subscribers can react appropriately without knowing why an event occurred. </li></ul><ul><li>Refer to the ExtJS Documentation when you want to know what arguments you will be passed. </li></ul><ul><ul><li>(Click Events link at the top of each class) </li></ul></ul>
  9. 9. Example ExtJS Docs <ul><li>complete </li></ul><ul><li>public event complete </li></ul><ul><li>Fires after editing is complete and any changed value has been written to the underlying field. Subscribers will be called with the following parameters: </li></ul><ul><ul><li>this : Editor </li></ul></ul><ul><ul><li>value : Mixed The current field value </li></ul></ul><ul><ul><li>startValue : Mixed The original field value </li></ul></ul><ul><li>This event is defined by Editor. </li></ul>
  10. 10. this .editItemNumber.on('complete', this .commitRecord, this ); <ul><li>commitRecord : function ( ed , value , oldValue) { </li></ul><ul><ul><li>var boundElDom = ed .boundEl.dom; </li></ul></ul><ul><ul><li>var recordId = boundElDom.parentNode.id; </li></ul></ul><ul><ul><li>var currRecord = this .store.getById(recordId); </li></ul></ul><ul><ul><li>var cn = boundElDom.className; </li></ul></ul><ul><ul><li>currRecord.set(cn, value ); </li></ul></ul><ul><ul><li>currRecord.commit(); </li></ul></ul><ul><ul><li>this .refresh(); </li></ul></ul><ul><li>}, </li></ul>
  11. 11. ExtJS Events <ul><li>Many ExtJS classes expose before events which will allow you to cancel an action by returning false. </li></ul><ul><li>Ex: </li></ul><ul><ul><li>ds.on(‘beforeload’, function(ds, opts) {return false;}); </li></ul></ul><ul><li>In a real situation we would make an intelligent decision given ds and opts to cancel the load event. </li></ul>
  12. 12. What’s next? <ul><li>We will be covering how to create our own observable classes. </li></ul><ul><li>This will allow us to easily communicate between other classes. </li></ul><ul><li>For a full discourse on how event handling works in the DOM read Events and Event Handling in JavaScript: The Definitive Guide (p388 – 436) </li></ul><ul><li>All of these cross-browser discrepancies are eliminated by ExtJS </li></ul>
  13. 13. Next Class <ul><li>If you don’t want to read the whole chapter, look up the following concepts. </li></ul><ul><li>Dom Level 2 Event Handling </li></ul><ul><ul><li>Propagation </li></ul></ul><ul><ul><li>Bubbling </li></ul></ul><ul><ul><li>Default action </li></ul></ul><ul><ul><li>Related target </li></ul></ul>

×