Sencha Touch 2.3.1 list scroll freezing

Question

I'm using Sencha Touch 2.3.1 and using a list defined like this :

        {
            xtype: 'list',
            id: 'index_list',
            infinite: true,
            flex: 1,
            scrollToTopOnRefresh: false,
            disableSelection: true,
            store: 'store_index'
        }

List's store has got more than 300 records, that's why I put the flag "infinite" to true.

Problem is when I scroll very fastly up and down through the list, app freezes and I can't do anything else with UI.

Also tested , put infinite flag to false doesn't fix it.

Cannot reproduce if data are less than ~300 records.

Platforms : iOS 6, 7 (iPhone), not iPad.

Have you got any idea ?

Answer 1

Use this override works for me

Ext.define('InfiniteListScroll.override.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',

lastEventType: null,
changedTouchesId: null,
lastEventObject: null,

onEvent: function(e) {
    console.log('InfiniteListScroll.override.TouchGesture - onEvent');
    var type = e.type,
        lastEventType = this.lastEventType,
        touchList = [e];

    if ( type == 'touchstart' ) {
        if( this.changedTouchesId == null ) {
            this.changedTouchesId = e.changedTouches[0].identifier;
            this.lastEventObject = e;
        }
        else {
            console.log('changedTouchesId NOT null, touchEnd event wasnt fired for corresponding touchStart event.');
            this.onTouchEnd( this.lastEventObject );
        }
    }
    if (this.eventProcessors[type]) {
        this.eventProcessors[type].call(this, e);
        return;
    }
    if ('button' in e && e.button > 0) {
        return;
    }
    else {
        // Temporary fix for a recent Chrome bugs where events don't seem to bubble up to document
        // when the element is being animated with webkit-transition (2 mousedowns without any mouseup)
        if (type === 'mousedown' && lastEventType && lastEventType !== 'mouseup') {
            var fixedEvent = document.createEvent("MouseEvent");
                fixedEvent.initMouseEvent('mouseup', e.bubbles, e.cancelable,
                    document.defaultView, e.detail, e.screenX, e.screenY, e.clientX,
                    e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.metaKey,
                    e.button, e.relatedTarget);
            this.onEvent(fixedEvent);
        }
        if (type !== 'mousemove') {
            this.lastEventType = type;
        }
        e.identifier = 1;
        e.touches = (type !== 'mouseup') ? touchList : [];
        e.targetTouches = (type !== 'mouseup') ? touchList : [];
        e.changedTouches = touchList;
        this.eventProcessors[this.mouseToTouchMap[type]].call(this, e);
    }
},


onTouchEnd: function(e) {
    console.log('InfiniteListScroll.override.TouchGesture - onTouchEnd');
    if (!this.isStarted) {
        return;
    }
    if (this.lastMoveEvent) {
        this.onAnimationFrame();
    }
    var touchesMap = this.touchesMap,
        currentIdentifiers = this.currentIdentifiers,
        changedTouches = e.changedTouches,
        ln = changedTouches.length,
        identifier, i, touch;

    this.changedTouchesId = null;
    this.updateTouches(changedTouches);
    changedTouches = e.changedTouches;
    for (i = 0; i < ln; i++) {
        Ext.Array.remove(currentIdentifiers, changedTouches[i].identifier);
    }
    e = this.factoryEvent(e);
    for (i = 0; i < ln; i++) {
        identifier = changedTouches[i].identifier;
        touch = touchesMap[identifier];
        delete touchesMap[identifier];
        this.publish('touchend', touch.targets, e, {touch: touch});
    }
    this.invokeRecognizers('onTouchEnd', e);
    // Only one touch currently active, and we're ending that one. So currentTouches should be 0 and clear the touchMap.
    // This resolves an issue in iOS where it can sometimes not report a touchend/touchcancel
    if (e.touches.length === 1 && currentIdentifiers.length) {
        currentIdentifiers.length = 0;
        this.touchesMap = {};
    }
    if (currentIdentifiers.length === 0) {
        this.isStarted = false;
        this.invokeRecognizers('onEnd', e);
        if (this.animationQueued) {
            this.animationQueued = false;
            Ext.AnimationQueue.stop('onAnimationFrame', this);
        }
    }
}

});