перейти к следующему представлению на картинке нажмите?

Question

Я использую dataview itemTpl для отображения моих изображений (просмотр миниатюр).

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

Я пробовал это с контроллером, но не повезло. Можете ли вы помочь мне решить это.

Я использую Sencha Architect 2 для своего примера.

Я пытаюсь этот код .Please исправить мне

Первый вид

Ext.define('MyApp.view.MyPanel', { 
    extend: 'Ext.Panel', 
    alias: 'widget.galleryview', 

    config: { 
     layout: { 
      type: 'fit' 
     }, 
     items: [ 
      { 
       xtype: 'dataview', 
       id: 'gallerythumbnail', 
       layout: { 
        type: 'fit' 
       }, 
       itemTpl: [ 
        '<div class="lb-album">', 
        ' <ul>', 
        '  <li>', 
        ' <img src="{filename}" width="120px" heigth="120px"/>', 
        '  </li>', 
        ' </ul> ', 
        '</div>' 
       ], 
       store: 'ImageStore' 
      } 
     ] 
    } 

}); 

Второй вид - это представление должно отображаться, когда IMG сливают

Ext.define('MyApp.view.FullViewPanel', { 
    extend: 'Ext.Panel', 

    config: { 
     layout: { 
      type: 'fit' 
     }, 
     items: [ 
      { 
       xtype: 'carousel', 
       id: 'mycarousel' 
      } 
     ] 
    } 

}); 

Контроллер

Ext.define('MyApp.controller.GalleryController', { 
    extend: 'Ext.app.Controller', 

    config: { 
     refs: { 
      nav: 'galleryview' 
     }, 

     control: { 
      "dataview": { 
       itemtap: 'viewFullScreen' 
      } 
     } 
    }, 

    viewFullScreen: function(dataview, index, target, record, e, options) { 
     Ext.ComponentQuery.query('galleryview').push('MyApp.view.FullView'); 
     console.log(record); 


    } 

}); 

Спасибо

Answer 1

Если вы хотите сделать это на изображение нажатия вы можете проверить на событие в этом слушателе.

Метод 1

listeners : { 
    itemtap: function (list, index, item, record, senchaEvent) { 
     if (senchaEvent.event.target.nodeName == 'IMG') { 
      // Show next view 
     } 
    } 
} 

Я использовал как этот

Ext.create('Ext.List', { 
       itemCls : 'my-dataview-item', 
       id : 'myList', 
       itemTpl : '<div><img src="' + localStorage.httpServerPrefix + '{imageURI}"/><span id="name">{fullname}</span></div>', 
       store : aroundStore, 
       listeners : { 
        itemtap: function (list, index, item, record, senchaEvent) { 
         if(senchaEvent.event.target.nodeName =='IMG') { 
          me.othersProfileImageClicked(record.data); 
         } 
         else 
          me.onMessageClickedInAround(list, record);     
        } 
       } 
      }); 

Update

listeners : { 
    itemtap: function (dataview,index,target,record,e,option) { 
     if (e.event.target.nodeName == 'IMG') { 
      // Show next view 
     } 
    } 
} 

Способ 2

Вы можете использовать делегирование событий, как этот

Ext.create('Ext.List', { 
     itemCls : 'my-dataview-item', 
     id : 'myList', 
     itemTpl : '<div><img src="' + localStorage.httpServerPrefix + '{imageURI}"/><span id="name">{fullname}</span>', 
     store : aroundStore,, 
     listeners: [{ 
      element: 'element', 
      delegate: 'img', 
      event: 'tap', 
      fn: function() { 
       alert('One!'); 
      } 
     } 
    ] 
});