向 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。我喜欢这种方法，因为在 window 调整大小时，图块会自动将自己重新排列为适当数量的 rows/columns（我还没有找到处理任何内置布局的方法） .

我无法做的是向模板生成的项目添加事件侦听器。我想添加一个点击侦听器，以便我可以触发 window 并显示全尺寸图像。

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

谢谢！

Answer 1

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

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

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

顺便说一下，我建议像您引用的示例中那样使用 dataview。它已经提供了内置的项目相关事件，比如 itemclick 等等。

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

Adding listeners to each element in an xtemplate loop

javascript

extjs

extjs5

extjs6

javascript

CSS