Wie sperre ich ein Karussell in Sencha Touch

Question

Ich benutze ein Karussell und möchte das Karussell sperren, bis eine Schaltfläche geklickt wird. Gibt es einen einfachen Weg, dies zu tun? Vielen Dank!

Mein Code so weit:

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

Sie benötigen eine benutzerdefinierte Ansicht für abschließbare Karussell schreiben:

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

Dann können Sie diese kundenspezifische Karussell erweitern überall extend auch mit, wie Sie benötigen, um wenden Sie benutzerdefinierte lock und unlock Funktion für Ihr gewünschtes abschließbares Karussell über Knopfhandler an:

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