キャロルでのドラッグを無効にする

Question

キャロルパネル間でドラッグしてドラッグする機能を無効にすることはできますか？ 私はちょうどインジケータを使いたいです。カルーセルにおける方法afterRender

Answer 1

試行オーバーライドは、

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