1

私はextjs 6で画像ギャラリーのプロトタイプに取り組んでいます.

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 ループでレンダリングされた項目にリスナーを追加することは可能ですか? もしそうなら、どうすればいいですか？

ありがとう！

4

1 に答える 1

2

各タイルにリスナーを個別に追加する必要はありません。次のオプションを使用して、タイル コンテナー (タイル テンプレートを保持するコンポーネント) で実行しdelegateます。

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

クリック イベントはコンテナの dom 要素でリッスンされますが、Ext JS はバブリング/キャプチャを処理し、タイルのクリックのみを報告するほどスマートです。

ちなみに、dataviewあなたが引用した例のように使用することをお勧めします。組み込みのアイテム関連のイベントなどを既に提供していますitemclick。

于 2015-08-09T00:22:40.973 に答える