Disable scrolling carousel / overdrag in Sencha Touch
At the end or the beginning of the Sencha Touch 2 carousel, the user can drag the item past where they should be able to go and display a white background (screenshot here: http://i.imgur.com/MkX0sam.png ). I am trying to disable this functionality so the user cannot drag the end / start of the carousel.
I tried to do this with various configurations scrollable
including the one that is usually suggested to work with overscrolling
scrollable : {
direction: 'horizontal',
directionLock: true,
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 5
},
outOfBoundRestrictFactor: 0
}
The above configuration especially outOfBoundRestrictFactor
does not allow dragging by the end, but it also stops dragging anywhere else in the carousel either ... so it won't work. I screwed on all other configurations with no positive effect.
Unfortunately I was unable to find many changes to the drag and drop settings. Any help here would be awesomesauce.
source to share
What you need to do is override the functionality onDrag
in the carousel. This is where the logic comes in to determine which direction the user is moving in and where you can check if it is the first or the last.
Here is a class that does exactly what you want. The code you're interested in is right at the bottom of the function. The rest is just taken from Ext.carousel.Carousel
.
Ext.define('Ext.carousel.Custom', {
extend: 'Ext.carousel.Carousel',
onDrag: function(e) {
if (!this.isDragging) {
return;
}
var startOffset = this.dragStartOffset,
direction = this.getDirection(),
delta = direction === 'horizontal' ? e.deltaX : e.deltaY,
lastOffset = this.offset,
flickStartTime = this.flickStartTime,
dragDirection = this.dragDirection,
now = Ext.Date.now(),
currentActiveIndex = this.getActiveIndex(),
maxIndex = this.getMaxItemIndex(),
lastDragDirection = dragDirection,
offset;
if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {
delta *= 0.5;
}
offset = startOffset + delta;
if (offset > lastOffset) {
dragDirection = 1;
}
else if (offset < lastOffset) {
dragDirection = -1;
}
if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {
this.flickStartOffset = lastOffset;
this.flickStartTime = now;
}
this.dragDirection = dragDirection;
// now that we have the dragDirection, we should use that to check if there
// is an item to drag to
if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) {
return;
}
this.setOffset(offset);
}
});
source to share