2.2.0 Infinite List Freezing

**jwcraig** · 10 May 2013 5:42 PM

REQUIRED INFORMATION
Ext version tested:

Touch 2.2.0

Browser versions tested against:

Safari (iOS 6.1.3) iPad
Safari (iOS 6.1.3) iPad Simulator
Mac Chrome
Mac Safari

DOCTYPE tested against:

html

Description:

The list will freeze and all app functionality will stop working after swiping the list rapidly and going beyond its visible bounds. E.g. continuing swiping into a docked toolbar or navigation bar, then swiping back into the list area. This can be reproduced consistently.

Steps to reproduce the problem:

Swipe rapidly either upwards or downwards and continuing swiping into a docked toolbar or navigation bar, then swiping back into the list area rapidly, back and forth.
It is easier to reproduce when there is a large number of list items, i.e. > 50, but can be reproduced with fewer items
It is easier to reproduce if there are multiple toolbars, i.e. a navigation toolbar and a panel containing a docked toolbar and an infinite list, but can be reproduced when the list is fullscreen.
Can reproduce on device (iPad) and in simulator. See attached video.
Can't reproduce in desktop Safari or Chrome

The result that was expected:

standard list swiping/scrolling behaviour

The result that occurs instead:

list freezes and all UI elements become unresponsive (e.g. buttons)

Test Case:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>how2trak Mobile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/lib/touch2/sencha-touch.css"/>
    <script type="text/javascript" src="http://localhost/lib/touch2/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="http://localhost/test-infinite-list.js"></script>
</head>
<body>
</body>
</html>

Code:

Ext.setup({
    onReady: function() {

        Ext.define('Contact', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['id', 'firstName', 'lastName']
            }
        });

        var generateData = function() {
            var data = [];
            for (var i = 0; i < 300; i++) {
                data.push({
                    id: i,
                    firstName: 'First' + i,
                    lastName: 'Last' + i
                });
            }
            return data;
        }

        var store = Ext.create('Ext.data.Store', {
            model: 'Contact',
            data: generateData()
        });

        Ext.Viewport.add({
            xtype: 'navigationview',
            items: [
                {
                    xtype: 'panel',
                    title: 'People',
                    height: '100%',
                    width: '100%',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            width: '100%',
                            ui: 'light',
                            layout: {
                                type: 'hbox',
                                pack: 'center'
                            },
                            items: [
                                {
                                    xtype: 'spacer'
                                },
                                {
                                    xtype: 'searchfield',
                                    itemId: 'textFieldSearch',
                                    labelWidth: 200,
                                    labelAlign: 'left',
                                    width: 400
                                },
                                {
                                    xtype: 'spacer'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'add',
                                    handler: function(btn){
                                        Ext.Msg.alert('button tapped');
                                    }
                                }
                            ]
                        },
                        {
                            xtype: 'list',
                            itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
                            store: store,
                            height: '100%',
                            infinite: true,
                            itemHeight: 60
                        }
                    ]
                }
            ]
        });
    }
});

HELPFUL INFORMATION
Screenshot or Video:

http://wikisend.com/download/294056/infinitelistbug.m4v

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default sencha-touch.css

Operating System:

iOS 6.1

**jwcraig** · 10 May 2013 5:57 PM

Alternate file url:
http://www.filedropper.com/infinitelistbug

Please increase attachment limit. < 1MB is a bit extreme

**william.cheung** · 10 May 2013 8:32 PM

We have the same problem. From profiling the application, it looks like it has something to do to the animation queue - I saw animation frame fired event continuously without stopping for a long while.

**jwcraig** · 14 May 2013 1:08 PM

Bump. Acknowledgement or a request for more information would be appreciated.

**jwcraig** · 16 May 2013 10:02 AM

**jwcraig** · Yesterday 9:51 AM

**tgolembiewski** · Yesterday 12:14 PM

same here

2.2.0 Infinite List Freezing

Thread Tools

Search Thread

Display

2.2.0 Infinite List Freezing

2.2.0 Infinite List Freezing

list freezing

list freezing

Tags for this Thread