How do I lock a carousel in Sencha Touch - scroll

Question

I am using a carousel and would like to lock the carousel until a button is clicked. Is there an easy way to do this? Thanks!
My code so far:
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

You need to write a custom view for lockable carousel:
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; }
});
Then you can extend this custom carousel anywhere using extend as well as you need to apply custom lock and unlock function for your desired lockable carousel through button handler:
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