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

Dec 05, 2013
Blog
By Opsview Team, Administrator

Think of this scenario. You have multiple common services you wish to monitor, yet you only see one service check.

Apr 09, 2014
Blog
By Opsview Team, Administrator
What is it?
Bill Bauman introduces Opsview WSLTools at Monitorama PDX 2018
Jun 15, 2018
Blog
By John Jainschigg, Technical Content Marketing Manager

Monitorama PDX 2018, in Portland, offered an intense, three-day conference program -- by and for monitoring and DevOps practitioners.