You are here
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.
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:
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.
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.
Now you can place the controller code in the appropriate portion as normal:
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.
More like this
A guide on why we chose to work with Siesta for our front end testing.
White labeling is a quick and simple way to brand Opsview Monitor for Managed Service Providers.