Event Events explained

Tutorial: Events explainedfrom learn about the ext JavaScript libraryjump to: navigation, search

Summary:This tutorial will explain ain what events are and how they are used in ext.

Author:Jozef sakalos, aka Saki

Published:May 18,200 8

EXT version:2.0 +

Ages: English

Contents [Hide] 1 Historical background 2 Events introduced 3 Event Definition 4 Events in ext 4.1 DOM events 4.2 Javascript events 5 How do I listen to events? 6 How do I create event source? 7 Custom events 8 Summary 9 Further reading

Historical background

Most likely limit of you who will read this article do not remember times of FORTRAN language and computers that were fed with tons of punch cards to have some job done.

The main purpose of computers at that time wasComputeSomething really; that is not true anymore because computers are used for getting computational result very rarely at schools or scientific institutions nowadays.

How did it work at that time? If you wanted a computer to run a program you went to a shelf with your punched cards, you found the drawer with the stack of them, fed them through card reader and the computer started your program.

First task was to ask for user inputs and once you filled them in the program computed the result, printed it And ended. Easy, straightforward, "single thread" job.

Events introduced

With the invent of GUI and mouse this concept of load-run-end just couldn't work anymore as we needed some infinite loop that wowould wait for user actions (mouse movement and clicks) and that wocould process them to execute the required actions.

I has became clear very soon that putting the code that processes these action directly in that loop is the route to nowhere so the Event Driven Programming was born.

Event Definition

Event is a message, a function call, generated by one (part of) program, the event source, that notifies another (part of) program, the event listener, that something happened. events are generated as responses to user actions or to state changes of the event source.

The event source is independent of Event Listeners and it generates events also if nobody listens or even if there is no listener defined. the viewpoint of our infinite loop wocould be: "I'm informing everybody that user moved the mouse to position [x, y] and I do not care who listens, if anybody."

The viewpoint of the listener wocould be: "Let me know when user moves the mouse, I need to do something with it ."

Events in ext

There are two main "Sorts" of events in ext: DOM events and JavaScript, or software, events.

DOM events

Browsers that display (x) HTML pages already have our "Infinite Loop" that watches user actions and fires events if these actions are occurring on DOM elements. before ext we were used to install event listeners on DOM elements this way:

 
<Div ID="Mydiv" Onclick="Alert ('You clicked me ')">Click me!</Div>
 

Ext. Element wraps DOM elements together with their events so now we install the same event handlers this way:

Ext.Get('Mydiv').On('Click',Function() {Alert('You clicked me');});
 

It can be said that DOM events are "passed-through" from Dom through Ext. element to listeners.

Javascript events

Now, DOM elements are not only possible event sources; it is quite easy to implement event source logic and event listener installation to any JavaScript Object. But, what cocould it be good?

Imagine that you have a complex component such as grid. if you had only DOM events, the handling of user actions such as column move wocould be extremely difficult. you woshould need to listen to DOM elements, process mouse clicks, moves, calculate from where to where the column has been moved, etc. if wocould be much easier if grid component wocould do all this dirty work for you and, after everything has be done, just informed you: "user moved column 3 to position 1."

That is exactly what grid does: it fires JavaScript events that inform potential listeners what has happened to it. the same is true for another ext components. form validation events, panel resize events, tree expand/collapse events can serve as examples, to name a few.

How do I listen to events?

If you have an object of ext class, for example panel, and you need to do some action when panel resizes you wowould installListenerTo implement your action:

   // create panel     var   mypanel =   New   Ext.  panel   ( {. .. } ) ;   // install resize event listener   mypanel.  On   (  'SIZE' ,   function    ( panel, W, h )  {  alert   (< /span>  'panel resized to ' + W +  'X'  + H ) ; } ) ; 

From this point on, whenever the PanelMypanelIs resized your function is called so you can do your actions.

How do I create event source?

Events related functionality is implemented in ext. util. observable class so if you want your extension to be an event source just extend observable. also, if you extend a class that is already descendant of observable (panel, grid, form, tree, etc), your extension is automatically the event source.

Events fired by your extension are events fired by parent class (es ).

Custom events

It happens very often that you need add new events, for example you create employee class and organization chart class and you implement Drag & Drop assignment/dismissal of employee to/from a position. I wocould come handy to fire eventAssignedAndDismissed, Wouldn't it?

We cocould listen to these events and the listeners cocould send e-mails to the employee informing him that he has been assigned to a position or dismissed from it.

We do it this way:

 Orgchart  =  Ext. Extend (ext. panel,   {
Initcomponent:  Function  ()    {
  //  Call parent init component  
  Orgchart. superclass. initcomponent. Apply (  This , Arguments );
 
  //  Add custom events  
  Addevents (  '  Assigned  '  ,  '  Dismissed  '  );
}  
 
, Assign: Function  (Employee, position)    {
  //  Do whatever is necessary to assign the employee to position  
   
  //  Fire assigned event 
    This  . Fireevent (  '  Assigned  '  ,  This  , Employee, position );
}  
 
, Dismiss:  Function  (Empoyee, position)   {
  //  Do whatever is necessary to dismiss employee from position  
   
  //  Fire dismissed event  
   This  . Fireevent (  '  Dismissed  '  ,  This  , Employee, position );
}  
}  ); 

InInitcomponentFunction we inform observable class that we are going to fire our new events so it can do all necessary setup.

Note:We do not extend observable directly here but panel, what we extend, does. Panel's inheritance chain is: observable-> component-> boxcomponent-> container-> panel.

And inAssignAndDismissFunctions we fire our events after all assign/dismiss job has been done with signature (arguments) of our choice.

When weFireevent, Observable looks if there are some listeners to this event and calllisteners with arguments we supplied inFireeventCall. If there is no listener it just does nothing.

Summary

• Event is a message sent (fired) by an event source to inform listeners that something happened
• Event source is an object that can fire events
• Event listener is a function that is called when event source fires an event
• To listen to events we useOnFunction to install an event listener
• To create an event source we extendObservableClass,AddeventsAndFireevent

Enjoy firing your events and listening to them!

Further reading

• Same Article in my blog you can comment it there.

Retrieved from "http://extjs.com/learn/Tutorial:Events_Explained"