Ext.js - Custom Events and listeners

Events are something which get fired when something happens to the class. For example when a button is getting clicked or before/ after element is rendered.

Methods of writing events:



Built in events using listeners
Attaching events later
Custom events

Built in events using listeners
Attaching events later
Custom events
Ext JS provides listener property for writing events and custom events in Ext JS files.
We will add the listener in the previous program itself by adding listen property to the panel as below:
Index.html
<!DOCTYPE html>
   <html>
      <head>
         <link rel = 'stylesheet' type ='text/css' href= 'extjs-4.1.1/resources/css/ext-all.css' />
         <script type ='text/javascript' src = 'extjs-4.1.1/ext-all-debug.js'></script>
         <script type ='text/javascript' src = 'app.js'></script> 
      </head>
      <body>
         <h1> Please click the button to see event listener </h1>
         <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
      </body>
   </html>
app.js
A button is created using Ext.button class. On click event is written in listener. 
On click of this button an alert will appear with text "Button is clicked"".
Ext.onReady(function(){
   Ext.create('Ext.Button', {
      renderTo: Ext.getElementById('helloWorldPanel'),
      text: 'My Button',
      listeners: {
         click: function() {
            this.message();
         },
         message: function() {
            Ext.MessageBox.alert('Alert box', 'Button is clicked');				
         }
      }
   });
});
Output:
Before clicking button
After clicking button
This way we can write multiple events also in listeners property.
Index.html
<!DOCTYPE html>
   <html>
      <head>
         <link rel = 'stylesheet' type ='text/css' href= 'extjs-4.1.1/resources/css/ext-all.css' />
         <script type ='text/javascript' src = 'extjs-4.1.1/ext-all-debug.js'></script>
         <script type ='text/javascript' src = 'app.js'></script> 
      </head>
      <body>
         <h1> Please click the button to see event listener </h1>
         <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
      </body>
   </html>
app.js
Ext.onReady(function(){
   Ext.create('Ext.Button', {
      renderTo: Ext.getElementById('helloWorldPanel'),
      text: 'My Button',
      listeners: {
         click: function() {
            this.hide();
         },
         hide: function() {
            Ext.MessageBox.alert('Alert box', 'Button is clicked');
         },
         mouseover: function() {
            Ext.MessageBox.alert('Alert box', 'Mouse over event is called');
         }
      }
   });
});
Output:
Before clicking button
After clicking button
On mouse over
In the previous method of writing events we have written events in listeners at the time of creating elements.
Other way is to attach events in the as:
app.js
Ext.onReady(function(){
   var button = Ext.create('Ext.Button', {
      renderTo: Ext.getElementById('helloWorldPanel'),
      text: 'My Button',
   });
   // This way we can attach event to the button after the button is created.
   button.on('click', function() {
      Ext.MessageBox.alert('Alert box', Button is clicked');
   });
});
Before clicking button
After clicking button
The events which we have used above are the events which are inbuild in Ext JS. We can write custom events as:
app.js
Ext.onReady(function(){
   var button = Ext.create('Ext.Button', {
      renderTo: Ext.getElementById('helloWorldPanel'),
      text: 'My Button',
      listeners: {
         myEvent: function(button) {
            Ext.MessageBox.alert('Alert box', 'My custom event is called');
         }
      }
   });
   Ext.defer(function() {
      button.fireEvent('myEvent');
   }, 5000);
});
Output:
Once the page is loaded and document is ready the UI page with button will appear and as we are firing an event after 5 sec the document is ready the alert box will appear after 5 seconds.
Here we have written the custom event 'myEvent' and we are firing events as button.fireEvent(eventName);

These are the three ways of writing events in Ext JS.
 Print
 Add Notes
 Bookmark this page