navigate to next view on image tap? - extjs

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

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