Disabilita trascinamento nel carosello

Question

È possibile disabilitare l'uso del trascinamento per passare tra i pannelli del carosello? Voglio usare solo un indicatore.

Answer 1

Prova di override AfterRender metodo a Carousel, (ho tolto eventi di trascinamento sul metodo Childs)

afterRender : function() { 
     Ext.Carousel.superclass.afterRender.call(this); 
     this.mon(this.body, { 
     direction : this.direction, 
     scope : this 
     }); 
     this.el.addCls(this.baseCls + "-" + this.direction) 
    } 

codice intero;

this.car = new Ext.Carousel({ 
       ui  : 'light', 
       items: [ 
       { 
         html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>', 
         cls : 'card card1' 
        }, 
        { 
         html: 'Card #2', 
         cls : 'card card2' 
        }, 
        { 
         html: 'Card #3', 
         cls : 'card card3' 
        }], 
         afterRender : function() { 
          Ext.Carousel.superclass.afterRender.call(this); 
          this.mon(this.body, { 
           direction : this.direction, 
           scope : this 
          }); 
          this.el.addCls(this.baseCls + "-" + this.direction) 
         } 
     }); 

Answer 2

Basta lanciare questo fuori per le persone Sencha Touch 2.0. La soluzione sopra descritta non funziona con Sencha Touch 2.0, ma c'è un lavoro piuttosto semplice.

Ext.define('Ext.LockableCarousel', { 
    extend: 'Ext.Carousel', 
    id: 'WelcomeCarousel', 
    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; } 
}); 

Questo funzionerà esattamente come un carosello, tranne che ora è possibile chiamare .lock e .unlock su di esso. Quindi potresti fare qualcosa del tipo:

Ext.Viewport.add(Ext.create('Ext.LockableCarousel', { 
    id: 'LockableCarousel', 
    fullscreen: true, 
    hidden: false, 
    items: [ 
     { 
      html : 'Item 1', 
      style: 'background-color: #5E99CC' 
     }, 
     { 
      html : '<a href="#" onclick="Ext.getCmp(\'LockableCarousel\').lock();">Lock</a><br /><a href="#" onclick="Ext.getCmp(\'LockableCarousel\').unlock();">Unlock</a>', 
      style: 'background-color: #759E60' 
     } 
    ] 
}));