How to determine when a toolbar has been clicked in ExtJS 7.0.0 - extjs

Question

I want to detect clicks on my toolbar, alternatively focus of toolbar.
The use-case has been extracted from a LiveSearchGrid which has a toolbar, the one seen in the code. The code provided renders fine, but no detect of click, focus, or anything else. Just nothing.
See below:
<div id="toolbar"></div>
<script type="text/javascript">
Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'toolbar',
name: 'searchBar',
focusEl: 'toolbar',
listeners: {
focusenter: function () {
console.log('focusenter')
},
focus: function () {
console.log('focus')
}
},
items: [
{
xtype: 'tbtext',
html: 'Search',
listeners: {
focusenter: function () {
console.log('focusenter')
}
}
},
'Case Sensitive'
]
})
</script>
The following is plain JavaScript which solves my problem.
document.getElementById('toolbar').onclick = function () {
console.log('hello world');
}
What am I doing wrong?

Answer 1

You can set a DOM listener on the underlying Ext.Element using the element property of the listener config
Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'toolbar',
name: 'searchBar',
focusEl: 'toolbar',
listeners: {
click: {
element: 'element', // bind to the underlying element
fn: function() {
console.log('Toolbar element was clicked!');
}
},
focusenter: {
element: 'element', // bind to the underlying element
fn: function() {
console.log('Toolbar element was focused!');
}
}
},
items: []
});
That property can be set to element or bodyElement