navigate to next view on image tap?

Question

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

"I tried this with controller but no luck". Could you show us the code of what you tried — Titouan de Bailleul, Feb 26 '13 at 09:17
I am trying this from last 3 hrs. I tried with controller and event delegation both,but no luck !! — Sukane, Feb 26 '13 at 09:22
if(current_data.xindex >= 0) { Ext.Msg.alert("Opps!!!"); /*var details = 'MyApp.view.ImageContainer'; //this.push(details); not able to push data from this view to other view How to navigate/push data from this view to other ? (i am writing this code in itemTpl of Ext.Dataview using Sencha Architect) */ this.up('testpanel').push({xtype:'imagecontainer'}); } else{ Ext.Msg.alert("Opps!!!", "Something went wrong while calling data"); } — Sukane, Feb 27 '13 at 11:42
getting uncaught error : cannot call method 'push' of undefined can some help me finding solution for this. Thank You — Sukane, Feb 27 '13 at 11:45

Viswa · Accepted Answer · 2013-08-06T04:34:25.437

0

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

edited Aug 06 '13 at 04:34

answered Feb 28 '13 at 05:46

Viswa

3,211
5
34
65

:Thank you for sharing answer, but there is no senchaEvent in my code. I am using Sencha architect. What I get as param in itemTap function is as follows, can you please provide some help for below itemtap :function(dataview,index,target,record,e,option){ var store=Ext.getStore('TestStore'); store.load(); var current_store = dataview.getStore(); var current_data = dataview.getStore().getAt(index).getData(); //this.up('testpanel').push({xtype:'imagecontainer'});} But this code is not working. I have img thunbnail on this dataview and on tap of image it should navigate Plz help – Sukane Feb 28 '13 at 09:56
put this "alert(e.event.target.nodeName)" inside itemtap function and tell me what your getting – Viswa Feb 28 '13 at 10:06
when you tab on image, what your getting in alert – Viswa Feb 28 '13 at 10:10
when I tab on image I get IMG in alert – Sukane Feb 28 '13 at 10:13
let me know, if your still having problem ? – Viswa Feb 28 '13 at 10:20
i understood the IMG part. But I am still having a problem in navigation !!! I am getting error – Sukane Feb 28 '13 at 10:29
uncaught error : has no method. How to navigate? what is me? 'this' is not working !! – Sukane Feb 28 '13 at 10:37
I have written this var me = MyApp.view.TestPanel; if(e.event.target.nodeName === 'IMG'){ me.test(record.data);//what should come here? }else{ // } – Sukane Feb 28 '13 at 10:39
post the code, so that i can understand what your trying to do – Viswa Feb 28 '13 at 10:43
what you want to do, within if – Viswa Feb 28 '13 at 10:50
what i am trying to do is when i tap on the image it should be displayed in new view on the full screen of the platform – Sukane Feb 28 '13 at 10:52
within if - want to display the selected image on next view (navigate to next screen) – Sukane Feb 28 '13 at 10:56
where is test function?, i navigate to next view using Ext.Viewport.add({xtype : 'replies'}); – Viswa Feb 28 '13 at 11:12
tell me where you written test function – Viswa Feb 28 '13 at 11:15
you can't call like that, are you calling function written in view at controller?. – Viswa Feb 28 '13 at 11:27
no. I tried using controller but no luck. I have updated my question please check and Please let me know – Sukane Feb 28 '13 at 11:35
I am not able to fix this. Please check my updated post. Please share the solution. Thanks – Sukane Mar 06 '13 at 07:58
Above answer is useful to check if tapped item is image or not. But I not not able to push data ., navigate from one screen to other on image tap. – Sukane Mar 07 '13 at 08:46

navigate to next view on image tap?

1 Answers1

Linked