Jak zablokować karuzelę w Sencha Touch

Question

Używam karuzeli i chciałbym zablokować karuzelę do momentu kliknięcia przycisku. Czy istnieje prosty sposób na zrobienie tego? Dzięki!

Mój kod do tej pory:

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

Musisz napisać własny pogląd na zamykanym karuzeli:

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

można wtedy przedłużyć ten niestandardowy karuzelę dowolnego miejsca za pomocą extend jak trzeba Zastosuj niestandardowe funkcje lock i unlock dla wybranej blokowanej karuzeli za pomocą programu obsługi przycisku:

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