Making a clickable image and/or making a clickable container (Ext JS 4.x)

I had a case where I wanted to be able to click on an image and have it execute a transition within the Ext JS MVC framework. I originally looked into just using a regular button, but ran into several styling issues and most importantly a problem where the large image was being clipped. Due to a time crunch I threw a click listener on a container and set the container’s background using CSS.

JS:

...

{ 
       xtype: 'container',
       width: 290,
        height: 248,
        cls: 'button-single-report',
        listeners: {
         afterrender: function (comp) {
                 var element = comp.getEl();
                        var me = this;
                        element.on('click', function() {
                              console.log('this container was pressed');       
                        });
                },
}
...

CSS File:

.button-single-report {
  background-image: url('../images/single_report.jpg') !important;
  background-repeat: no-repeat;
}