禁用在Carousel中拖動

Question

是否可以禁用使用拖動在Carousel面板之間切換？ 我想用指標。

Answer 1

嘗試倍率AfterRender階段在旋轉木馬方法;（I除去上兒童的方法拖拽事件）

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

全體的代碼;

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

只爲Sencha Touch 2.0用戶拋出這個問題。上述解決方案不適用於Sencha Touch 2.0，但有一個相當簡單的解決方法。

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

這將完全像旋轉木馬一樣運行，除非現在您可以調用.lock和.unlock。所以你可以這樣做：

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