Перейти к следующему виду на изображении нажмите?

Question

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

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

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

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

Я пытаюсь этот код. Пожалуйста, исправьте меня

Первый вид

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);                  
                    }
                }
            });

Обновить

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!');
            }
        }
     ]
 });