navigate to next view on image tap?

问题

I am using dataview itemTpl to display my images (thumbnail view).

I am able to display the images properly. How can I add itemtap on these images? So that when I tap on a particular image a new view is shown with the tapped image?

I tried this with controller but no luck. Can you help me solving this.

I am using Sencha Architect 2 for my example.

I am trying this code .Please correct me

First View

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'
            }
        ]
    }

});

Second View - this view must be displayed when img is tapped

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

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

});

Controller

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


    }

});

Thank You

回答1:

If you only want to do it on image tap you can check for the event in that listener.

Method 1

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

I used like this

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

Method 2

You can use event delegation, Like this

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

来源：https://stackoverflow.com/questions/15083589/navigate-to-next-view-on-image-tap