Desactivar el arrastre en el carrusel

Question

¿Es posible deshabilitar el uso del arrastre para intercambiar entre los paneles del carrusel? Quiero usar solo indicador.

Answer 1

Try override afterRender método en el carrusel; (I elimina eventos de arrastre sobre el método 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) 
    } 

código entero;

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

Solo lanzando esto para el Sencha Touch 2.0 personas. La solución anterior no funciona para Sencha Touch 2.0, pero hay una solución bastante fácil.

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

Esto funcionará exactamente como un carrusel, excepto que ahora puede llamar a .lock y .unlock en él. Entonces usted podría hacer algo como:

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