ext js 现代工具包中的单击委托的等价物是什么？

问题描述

我想在带有图像的容器上添加导航按钮，以便用户可以导航到上一张或下一张图像。

{
    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>',}             

如何检测特定 div 被点击？

通过与经典工具包的类比，我尝试添加点击侦听器，例如：

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

但是，这不起作用。

解决方法

您可以使用以下代码：

{
    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');
            }
        }
    }
}