Добавление слушателей к каждому элементу в 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%; 
    } 
} 

Я использовал XTemplate посмотрев на dataview kitchen sink example. Мне нравится этот подход, потому что плитки автоматически перестраиваются в соответствующее количество строк/столбцов при изменении размера окна (что я не нашел способа сделать с любым из встроенных макетов).

Что я не могу сделать, это добавить слушателей событий к элементам, сгенерированным шаблоном. Я хотел бы добавить прослушиватель кликов, чтобы я мог вызвать окно и показать изображение полного размера.

Можно ли добавить слушателей к элементам, отображаемым в цикле for xtemplate? Если да, то как мне это сделать?

Спасибо!

Answer 1

Нет необходимости добавлять слушателей к каждой плитке индивидуально. Сделайте это на плитке контейнера (компонент держит шаблон плитки) с delegate вариант:

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

Событие щелчок будет слушать на йот элемента контейнера, но Ext JS будет достаточно умна, чтобы иметь дело с bubbling/capturing и только сообщают о кликах на плитки.

Кстати, я бы рекомендовал использовать dataview, как в примере, который вы указали. Он предлагает встроенные события, связанные с деталями, например itemclick и другие.