如何为extjs5启用swipe carousel事件

时间:2015-01-28 04:38:22

标签: touch swipe extjs5

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

1 个答案:

答案 0 :(得分:1)

更改侦听器后

代码正在运行

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

                }
            }
        }