Question

At the end or beginning of a Sencha Touch 2 carousel, a user can drag the item past where it should be able to go and display the white background (screenshot here: https://i.stack.imgur.com/i10Ak.png). I’m trying to disable this functionality, so a user can’t drag past the end/beginning of a carousel.

I’ve attempted to do this with the various scrollable configurations, including the setup that is typically suggested for dealing 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 stop the ability to drag past the end, but it also stops the ability to drag anywhere else in a carousel either…so that doesn’t work. I’ve screwed around with all of the other configurations to no positive effect.

Unfortunately, I haven’t been able to find much on modifying the configurations of dragging. Any help here would be awesomesauce.

Answer 1

What you need to do is override the onDrag functionality in Carousel. This is where the logic is to detect which direction the user is dragging, and where you can check if it is the first or last item.

Here is a class that does exactly what you want. The code you are interested in is right at the bottom of the function. The rest is simply 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);
    }
});