为 xtemplate 循环中的每个元素添加侦听器

Question

我正在使用 extjs 6 制作图片库的原型。

I've got the basic layout setup in a fiddle，但我不确定如何（或者如果可以的话）为画廊中的每个图块添加点击侦听器。

javascript

Ext.define('ChrisAndRuthie.view.Viewport',{
    extend: 'Ext.container.Viewport',

    controller: 'viewportcontroller',
    viewModel:{
        type: 'viewportmodel'
    },

    layout: 'border',
    items:[
        {
            region: 'north',
            xtype: 'panel',
            title: 'chrisandruthie.com',
            tools:[
                {
                    xtype: 'button',
                    text: 'Log In'
                },
                {
                    xtype: 'button',
                    text: 'Log out'
                }
            ]
        },
        {
            region: 'center',
            title: 'Content',
            header: false,
            layout: 'fit',
            items:[
                {
                    xtype: 'component',
                    bodyPadding: 10,
                    tpl: [
                        '<tpl for=".">',
                            '<div class="pic-tile">',
                                '<div><img src="{image}"></div> ',
                                '<div>{name}</div>',
                            '</div>',
                        '</tpl>'
                    ],
                    bind:{
                        data: '{thumbnails}'
                    }
                }
            ]
        }
    ]
});

Ext.define('ChrisAndRuthie.view.ViewportModel',{
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.viewportmodel',
    data: {
        thumbnails: [
            {
                name: 'tumb 1',
                image: 'images/image1.png'
            },
            {
                name: 'thumb 2',
                image: 'images/image2.png'
            },
            {
                name: 'tumb 3',
                image: 'images/image3.png'
            },
            {
                name: 'thumb 4',
                image: 'images/image4.png'
            }
        ]
    }
});

Ext.define('ChrisAndRuthie.view.ViewportController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.viewportcontroller'
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('ChrisAndRuthie.view.Viewport');
    }
});

CSS

.pic-tile {
    float: left;
    padding: 8px;
    margin: 8px 8px 4px 8px;
    border: 1px solid #4E8FD5;
    word-wrap: break-word;
    width:200px;
    height: 200px;

    img {
        border: 1px solid #336394;
        margin: 0 auto;
        width: 100%;
    }
}

在查看dataview kitchen sink example 后，我使用了 xtemplate。我喜欢这种方法，因为在窗口调整大小时，图块会自动重新排列成适当数量的行/列（我还没有找到任何内置布局的方法）。

我无法将事件侦听器添加到模板生成的项目中。我想添加一个点击监听器，以便触发一个窗口并显示完整尺寸的图像。

是否可以为 xtemplate 的 for 循环中呈现的项目添加侦听器？如果是这样，我该怎么做？

谢谢！

Answer 1

无需单独为每个图块添加侦听器。使用delegate 选项在磁贴容器（保存磁贴模板的组件）上执行此操作：

listeners: {
    click: function(event, tile) {
        console.log(tile);
    },
    element: 'el',
    delegate: 'div.pic-tile'
}

会在容器 dom 元素上监听 click 事件，但 Ext JS 会足够聪明地处理 bubbling/capturing 并且只报告图块上的点击。

顺便说一句，我建议您使用dataview，就像您引用的示例一样。它已经提供了与物品相关的内置事件，例如 itemclick 等等。