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

user_19795503 0
Viewed 35

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?

extjs
1 Answers

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

user_2272990
Related