Event-driven development

Before we start talking about components, you need to understand how events and listeners work behind the scenes. The first thing you need to learn is the observable pattern.

Basically, the observable pattern is designed to allow entities or objects to communicate with each other using events. When a certain action occurs inside an object or component, this object should broadcast an event to whoever is listening.

For example, when a button is clicked on, it fires the click event. When a row of a grid is clicked on, the grid fires the itemclick event. All components have defined events and they are fired when an action occurs.

The component that is firing the event doesn't know who will listen to its messages, but its responsibility is to let others know that something has happened. Then, maybe other components will do something about it, or nothing at all.

The Ext.util.Observable base class allows us to add, fire, and listen to events from a specific object or component and perform actions when that event is executed.

All widgets included in the Ext JS library have the Ext.util.Observable class mixed in, so all widgets fire events that we can listen to perform actions and bring our widgets to life.

As mentioned before, we can define and fire new events on our custom components using the same Ext.util.Observable class.

Copy the singleton_01.js file (from the code files of chapter 02). Then, we have to add the following changes to the Employee class:

Ext.define('Myapp.sample.Employee',{
mixins: {observable: 'Ext.util.Observable'},
 Code.....
  constructor: function( config ){
    Code.....
    this.mixins.observable.constructor.call( this, config );
  },
 quitJob: function(){
this.fireEvent('quit', this.getName(), new Date(), 2,
 1, 'more params...' );
 }
});

As you can notice, the Employee class now contains the mixin—the Ext.util.Observable class. Also, inside the constructor function, this mixin is initialized by the this.mixins.observable.constructor.call(this, config); code. This means that Ext.util.Observable will be aware of any event launch inside the employee class, whenever it happens.

Note

To understand more about mixins, see http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Mixin.

The quitJob function, when called, will launch the quit event, passing the this.getName(), new Date(), 2, 1, 'more params...' parameters.

Note

In previous versions of Ext JS, we had to add the addEvent(...) method to create, or define, the proper event (or events) inside the class. If you are upgrading from version 4, be aware of this change. Version 5 is more flexible about it.

Now, we need the code to listen to the 'quit' event when it's launched. In Ext JS, we have the listeners property that is used for such purposes (listen/handle events). Let's modify the code where we instantiate the class:

var patricia = Ext.create('Myapp.sample.Employee', {
  name:'Patricia',
  lastName:'Diaz',
  age:21,
  isOld:false,
 listeners:{
 'quit':function(EmployeeName, quitDate, param, paramb, paramc){
 console.log('Event quit launched');
 console.log('Employee:' + EmployeeName);
 console.log('Date:'+ Ext.util.Format.date(quitDate,'Y-m-d H:i'));
 console.log('Param :' + param);
 console.log('Param B:' + paramb);
 console.log('Param C:' + paramc);
 }
 }
});
console.log(Myapp.CompanyConstants.welcomeEmployee(patricia));
patricia.quitJob();

The listeners property was included in the configuration object (the new Employee class), so in this way, we can intercept and handle the quit event whenever it happens. Let's run the code in our browser and check out the console output, as shown in the following screenshot:

Note

When talking about events and handlers, it's important to mention that we are talking about Ext JS and how it's coded, handled, or used in the framework, and we must make a clarification that this is not pure JavaScript behavior.

At this point, we have defined our event and the listener that will handle it. Another common way of adding the listener is by using the on method, which is a shorthand method of addListener:

patricia.on({
  'quit':function(EmployeeName, quitDate, param, paramb, paramc){
    console.log('Event quit launched');
    console.log('Employee:' + EmployeeName);
    console.log('Date:' + Ext.util.Format.date(quitDate, 'Y-m-d H:i'));
    console.log('Param :' + param);
    console.log('Param B:' + paramb);
    console.log('Param C:' + paramc);
  }
});
patricia.quitJob();

Remember that it's important to add a listener (or listeners) before executing the desired method (or methods). Events are the way we can execute certain sets of actions when events occur. As we can see in the previous example, the Employee class is responsible only for broadcasting the event when the quitJob method is called. The class itself doesn't care about who may be listening, but on the outside, an object is listening and will react according to the messages received.

The ability to add, fire, and listen to custom events is a very powerful feature in Ext JS.