You are here

Blog

ExtJS- Adding click events on components

We love ExtJS, a desktop quality web application framework. We have completely rewritten the user interface for our latest Opsview Monitor release so that you have much greater interactivity to find and choose the information that is important to you.

The web architecture of Opsview Monitor is a set of MVC applications at the browser end based on ExtJS, with an MVC backend in Perl Catalyst and the interface being our REST API.

However, as with all frameworks, you hit limitations. One of the limitations is that the click event is not fired for all types of ExtJS components, such as display field, image or button. Community forums have provided a workaround for this. For example:

items:[{
  xtype: 'button',
  text: 'Button text',
  listeners: {
    btnIconEl: {
      click: function() {
        alert('icon click!');
      }
    }
  }
}]

 

The trouble with this code is that you are tying controlling logic into the view. View code should be as simple as possible and the controller holds the necessary logic to take the appropriate action, thereby clearly separating the responsibilities of each class.

We wanted a more generic, scalable solution. Using ExtJS's controllers, we can define a global catch to add the click event and then the appropriate controllers can take the action required.

Ext.define('MyApp.controller.Main', {
  extend: 'Ext.app.Controller',
  init: function() {
    this.control({
      '[cls~=ovAddComponentClickEvent]': {
        // Some types of components do not have a click event (such as a displayfield)
        // Add this cls to any component if you need this event, so that you can hook into the click event in the appropriate controller
        afterrender: this.addComponentClickEvent
      }
    });
  },
  addComponentClickEvent: function(cmp) {
    cmp.getEl().on('click', function() {
      cmp.fireEvent('click', cmp);
    });
  }
});

 

The magic is the query selection is meant to find all components with the CSS class that includes "ovAddComponentClickEvent". This finds all these components and then at the after render event (which guarantees that the HTML element has been created), we can add an HTML click listener to that element and then fire an ExtJS event.

Then for the view, you just add the class to the component to get this functionality.

items:[{
  xtype: 'image',
  alt: 'Summary icon',
  itemId: 'imgSummary',
  src: '/image/icon_summary.png',
  cls: 'ovAddComponentClickEvent',
}]

 

Now you can place the controller code in the appropriate portion as normal:

Ext.define('Settings.controller.SnmpTraps', {
  init: function() {
    this.control({
      'snmptrapstab [itemId=imgSummary]': {
        click: this.showSummary
      }
    });
  }
});

 

So using the simple class, ovAddComponentClickEvent, you can now add the click functionality to any component and put the controlling code where it is meant to reside. And it even documents itself!

We're looking for great ExtJS developers! Contact us if you are interested in joining.

Get unified insight into your IT operations with Opsview Monitor

tvoon's picture
by Ton Voon,
Front-end Developer
I like to solve problems and tweak and polish and streamline and automate and get it out there.

More like this

Apr 01, 2014
Blog
By Opsview Staff, Administrator

Sep 14, 2016
Blog
By Ton Voon, Front-end Developer

A guide on why we chose to work with Siesta for our front end testing. 

Jun 28, 2016
Blog
By Shamas Aziz,

White labeling is a quick and simple way to brand Opsview Monitor for Managed Service Providers.