ext js现代工具包中的click delegate相当于什么？

Question

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

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

但是，那是行不通的。

Answer 1

您可以使用以下代码：

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

ext js现代工具包中的click delegate相当于什么？

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

html

delegates

extjs