how to enable swipe carousel event for extjs5 - touch

Question

Ext.define('SApp.view.appCrd.InCarousel', {
extend: 'Ext.view.View',
xtype: 'InCarousel',
id:'InCarouselContent',
requires: ['Ext.data.Store',
'SApp.model.appCrd.InDetailModel',
'SApp.model.appCrd.InMeasureModel',
],
tpl: [
'<tpl for=".">',
'<div class="item thumb-wrap">',
'<div class="thumb" style="width:180px; height:180px;">',
'<div ><span class="thumb-title-home-page {class}"><span>{InName}</span></span></div>',
'<tpl for="measureData">',
'<div class="thumb-description" ><span class="thumb-description-name">{key}</span> <span class="thumb-description-value">{value}</span></div>',
'</tpl>',
'</div>',
'</div>',
'</tpl>'
],
itemSelector: 'div.thumb-wrap',
multiSelect: true,
listeners: {
click: {
element: 'el',
fn: function(){var createappCrdInDetailView = new Ext.create('SApp.view.appCrd.appCrdInDetailView');
var vport = Ext.getCmp('appCrdMainContent');
vport.removeAll(true, true);
vport.add(createappCrdInDetailView.show());}
},
dblclick: {
element: 'body',
fn: function(){ console.log('dblclick body'); }
}
},
singleSelect: true,
cls: 'x-image-view',
initComponent: function() {
this.store = Ext.create('Ext.data.Store', {
storeId: 'CustomerDataStore',
autoLoad: true,
model: 'SApp.model.appCrd.InDetailModel',
proxy: {
type: 'ajax',
url : '../SApp/resources/data/appCrd/InList.json',
reader: {
type: 'json'
}
}
});
this.callParent();
}
});

Answer 1

code is working after changing listener
swipe: {
element: 'el', //bind to the underlying body property on the panel
event: 'swipe',
fn: function(event){
if(event.direction == 'left'){
slideRight()
}else{
slideLeft()
}
}
}