导航到图像水龙头的下一个视图? [英] navigate to next view on image tap?

问题描述

我正在使用dataview itemTpl显示我的图像(缩略图视图).

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

我能够正确显示图像.如何在这些图像上添加itemtap? 这样，当我点击特定的图像时，点击的图像会显示一个新视图吗?

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.

我以Sencha Architect 2为例.

I am using Sencha Architect 2 for my example.

我正在尝试此代码.请更正

I am trying this code .Please correct me

第一视图

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


    }

});

谢谢

推荐答案

如果只想在图像点击上执行此操作，则可以在该侦听器中检查事件.

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

方法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

您可以使用事件委托，就像这样

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

这篇关于导航到图像水龙头的下一个视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！