javascript

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。我喜欢这种方法，因为在窗口调整大小（我没有找到任何内置布局的方法）时，tile会自动重新排列成适当数量的行/列。

我无法做的是将事件侦听器添加到模板生成的项目中。我想添加一个点击监听器，这样我就可以触发一个窗口并显示完整大小的图像。

是否可以为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并仅报告tile上的点击。

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

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

javascript

CSS

1 个答案: