What is the equivalent of click delegate in ext js modern toolkit?

Question

I would like to add navigation buttons on container with image, so the user can navigate to previous or next image.

{
    xtype: 'container',
    height: 400,
    width: 600,
    html: '<div id="ux-image-viewer-image">' +
               '<img src="https://elcl6.coe.int/slider/photo2.jpg">' +
                '<div id="ux-image-viewer-hoverNav" style="visibility: visible;">
                    <div id="ux-image-viewer-navPrev" style="visibility: visible;"><span>&lt;</span></div>
                    <div id="ux-image-viewer-navNext" style="visibility: visible;"><span>&gt;</span></div>' +
                '</div>' +                      
          '</div>',
}             

How can I detect that specific div is tapped?

By analogy with classic toolkit I tried to add tap listener like:

listeners: {
    el: {
      delegate: 'div.ux-image-viewer-hoverNav',
      tap: function() {
            console.log('Clicked!');
        }
    }
}

but, that doesn't work.

Answer 1

You can use the following code:

{
    xtype: 'container',
    height: 400,
    width: 600,
    html: '<div id="ux-image-viewer-image" style="border: 1px solid red;">' +
            '<img src="https://elcl6.coe.int/slider/photo2.jpg">' +
            '<div id="ux-image-viewer-hoverNav" style="visibility: visible;">' +
                '<div id="ux-image-viewer-navPrev" style="visibility: visible;">' +
                    '<span> &lt; </span>' +
                '</div>' +
                '<div id="ux-image-viewer-navNext" style="visibility: visible;">' +
                    '<span>&gt;</span>' + 
                '</div> ' +
            '</div>' +
        '</div>',
    listeners: {
        tap: {
            element: 'element',
            delegate: 'div#ux-image-viewer-hoverNav',
            fn: function() {
                console.log('click el');
            }
        }
    }
}