Sencha Touch 2.3.1 list scroll freezing - ios

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