Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Canada
    Posts
    11
    Vote Rating
    3
    jwcraig is on a distinguished road

      2  

    Exclamation 2.2.0 Infinite List Freezing

    2.2.0 Infinite List Freezing


    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:Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default sencha-touch.css
    Operating System:
    • iOS 6.1

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Canada
    Posts
    11
    Vote Rating
    3
    jwcraig is on a distinguished road

      0  

    Default


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

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

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Vancouver, BC, Canada
    Posts
    32
    Vote Rating
    3
    william.cheung is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Canada
    Posts
    11
    Vote Rating
    3
    jwcraig is on a distinguished road

      0  

    Default


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

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Canada
    Posts
    11
    Vote Rating
    3
    jwcraig is on a distinguished road

      0  

    Default


    bump

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Canada
    Posts
    11
    Vote Rating
    3
    jwcraig is on a distinguished road

      0  

    Default


    bump

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    9
    Vote Rating
    4
    tgolembiewski is on a distinguished road

      0  

    Default list freezing

    list freezing


    same here

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Soviet Russia
    Posts
    16
    Vote Rating
    0
    lkjhgfdsa is on a distinguished road

      0  

    Default


    Same here!

  9. #9
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    9
    Vote Rating
    4
    tgolembiewski is on a distinguished road

      0  

    Default


    Looks like this problem is fixed in nightly build from friday last week. I've upgraded to 2.2.1 nightly and its gone.

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    jcraig is on a distinguished road

      0  

    Default


    Still freezing for me with 2.2.1 1716 (2013-05-22)

    @tgolembiewski are you using Cordova?