Come bloccare un carousel in Sencha Touch

Question

Sto utilizzando un carosello e vorrei bloccare il carosello fino a quando non si fa clic su un pulsante. C'è un modo semplice per farlo? Grazie!

Il mio codice finora:

Ext.define('BabyBen.view.MainCarousel', { 
    extend: 'Ext.carousel.Carousel', 
    xtype: 'maincarousel', 

    config: { 
     fullscreen: true, 

     activeItem: 1, 
     indicator: false, 

     scrollable: { 
      direction: 'vertical', 
      directionLock: true 
     }, 

     items: [{ 
      xtype: 'whatscreen' 
     }, { 
      xtype: 'startscreen' 
     }, { 
      xtype: 'whenscreen' 
     }] 
    } 
}); 

Answer 1

è necessario scrivere una visualizzazione personalizzata per la giostra con serratura:

Ext.define("myApp.view.LockableCarousel",{ 
    extend: 'Ext.Carousel', 
    initialize: function() { 
     this.onDragOrig = this.onDrag; 
     this.onDrag = function (e) { if(!this.locked){this.onDragOrig(e);} } 
      }, 
    locked: false, 
    lock: function() { this.locked = true; }, 
    unlock: function() { this.locked = false; } 
}); 

Quindi è possibile estendere questa giostra personalizzato ovunque utilizzando extend così come è necessario applicare la funzione personalizzata lock e unlock per la sequenza desiderata bloccabile tramite il gestore pulsanti:

Ext.define("myApp.view.CustomCarousel",{ 
    xtype: 'CustomCarousel', 
    extend: 'myApp.view.LockableCarousel', 

    config: { 
     id: 'LockableCarousel', 
     title: 'Example4', 
     iconCls: 'cloud', 
     indicator: false,   

     items: [ 

      { 
       html : 'Item 1', 
       style: 'background-color: #5E99CC' 
      }, 

      { 
       items: [ 
        { 
         xtype : 'button', 
         text: 'Lock', 
         handler:function() { 
          Ext.getCmp('LockableCarousel').lock(); 
         } 
        }, 
        { 
         xtype : 'button', 
         text: 'Unlock', 
         handler:function() { 
          Ext.getCmp('LockableCarousel').unlock(); 
         } 
        } 
       ] 
      } 



     ] 
    } 
}); 

Working Demo