Làm cách nào để khóa băng chuyền trong Sencha Touch

Question

Tôi đang sử dụng băng chuyền và muốn khóa băng chuyền cho đến khi nút được nhấp. Có cách nào làm dễ hơn không? Cảm ơn!

Mã của tôi cho đến nay:

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

Bạn cần phải viết một cái nhìn tùy chỉnh cho băng chuyền có thể khóa:

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

Sau đó, bạn có thể mở rộng băng chuyền tùy chỉnh này bất cứ nơi nào sử dụng extend cũng như bạn cần áp dụng chức năng tùy chỉnh lock và unlock cho băng chuyền có thể khóa mong muốn của bạn thông qua trình xử lý nút:

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