Ext.js – Custom Events and Listeners


Ext.js – Custom Events and listeners

”;


Previous

Next

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

Methods of Writing Events

  • Built-in events using listeners
  • Attaching events later
  • Custom events

Built-in Events Using Listeners

Ext JS provides listener property for writing events and custom events in Ext JS files.

Writing listener in Ext JS

We will add the listener in the previous program itself by adding a listen property to the panel.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create(''Ext.Button'', {
               renderTo: Ext.getElementById(''helloWorldPanel''),
               text: ''My Button'',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert(''Alert box'', ''Button is clicked'');	
                  }
               }
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = ''helloWorldPanel'' />   <!--  panel will be rendered here-- >
   </body>
</html>

The above program will produce the following result −