1

我正在开发 extjs 6 中的图片库原型。

我有一个小提琴的基本布局设置，但我不确定如何（或者如果我可以）为画廊中的每个图块添加点击侦听器。

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厨房水槽示例后，我使用了 xtemplate 。我喜欢这种方法，因为在窗口调整大小时，图块会自动重新排列成适当数量的行/列（我还没有找到任何内置布局的方法）。

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

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

谢谢！

4

1 回答 1

2

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

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

click 事件将在容器 dom 元素上被监听，但 Ext JS 将足够聪明，可以处理冒泡/捕获，并且只报告图块上的点击。

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

于 2015-08-09T00:22:40.973 回答