Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

36,054 views

Published on

sdhjl2000@gmail.com

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here



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

×