ExtJS 6.x Add Custom Click Event To Component For ViewController

Question

For ExtJS 6.5+ Modern, how do you add a click event to an component so that you can access it in a view controller.

The example below doesn't work. I have also tried adding a listener directly to the sub-element.

Example Template:

Ext.define('TestController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.test-controller',

    control: {
        '[reference=someComponent]': {
            click: 'someComponentClick'
        }
    },

    someComponentClick: function() { 
       console.log('it worked!')
    }
})


Ext.define('TestContainer', {
    extend: 'Ext.Container',
    xtype: 'test-container',
    controller: 'test-controller',
    items: [
        {
            xtype: 'component',
            reference: 'someComponent'
            html: 'CLICK HERE TO TEST'
        }
    ]
})

Update

Based on priyadarshi answer, the following on the element calls the function in the controller. I would prefer however to pick the event up normally in the controller by just listening to the click event. Is there anyway to attach event listeners to the dom from the controller or at least fire an event from the element so that you can pick it up in the controller (without it explicitly calling functions on the controller).

 Ext.define('TestController', {
     extend: 'Ext.app.ViewController',
     alias: 'controller.test-controller',

     control: {
         '[reference=someComponent]': {
             click: 'someComponentClick'
         }
     },

     someComponentClick: function() { 
        console.log('it worked!')
     },
     someFuncOnController: function() {
         console.log('someFuncOnController') // << This runs
     }
 })


 Ext.define('TestContainer', {
     extend: 'Ext.Container',
     xtype: 'test-container',
     controller: 'test-controller',
     items: [
         {
             xtype: 'component',
             reference: 'someComponent'
             html: 'CLICK HERE TO TEST',
             listeners: [
                 element: 'element',
                 click: 'someFuncOnController'
             ]
         }
     ]
 })

Answer 1

Altering your code.

Do you need something like this?

Ext.define('TestController', {
 extend: 'Ext.app.Controller',

 init: function() {
     this.control({
         'test-container': {
             buttonClicked: this.onButtonClick
         }
     });
 },

 onButtonClick: function(button) { 
    console.log('it worked!')
 }
})


Ext.define('TestContainer', {
 extend: 'Ext.Container',
 xtype: 'test-container',
 //controller: 'test-controller', //declare your controller in your app.js
 items: [
     {
         xtype: 'button',
         text: 'Click Me!'
         listeners: {
             tap: function (button) {
                 var container = button.up('test-container');
                 container.fireEvent('buttonClicked', button);
             }
         }
     }
 ]
})