Android 4 list is performing worse in ST2 then ST1 (slow scroll)

**s.t.a.s** · 30 Nov 2012 2:48 PM

Originally Posted by olegtaranenko

Yes, still it is. Sencha has a problems with scrolling of ever not long list, because of its 'infinity' mode. To me more annoying is that it has hiccups (small delays) during scrolling.
Build: ST2.1 + phonegap 2.2 @ iOS 6.0.1 + XCode 4.5.2
XCode monitor show 100% (or ever more

CPU usage by scrolling. May be this follow to hiccup. Anyway it looks half-baked. I think hardware on Android is pretty weaker than 4S, therefore scrolling @ Android is ever worse

Cheers, Oleg

I confirm that flickering during scrolling it is in ST 2.1. Even on all types of iOS devices and it's noticable and annoying!!! It worked great there, much smoothly in ST 2.0.1 but now it looks almost similar like on Android devices (i mean looks similar badly). I can't explain why but it looks like they calculate scroller height and offsets everytime (even not in list). Who are interested in, just compare scrolling in Kitchen Sink in 2.1 and 2.0.1 (on iOS device, for instance, or in desktop Chrome with User Agent of iPhone or iPad). As for me, difference is obvious.

But if somebody knows secrets how to improve this perfomance or to make it similar to ST 2.0.1, please, share them (may be some tricks with css I missed or something else).

P.S.: And don't tell me to downgrade the app to 2.0.1.

Too late, unfortunately.

**Steffen Hiller** · 30 Nov 2012 2:56 PM

The best is to copy over the Ext.dataview.List and styles from 2.0.1 (or 2.1 beta 2) and use that one (or use Ext.dataview.DataView if you don't need list specific features like grouping).

There's also https://github.com/robertklep/buffer...sencha-touch-2 if you have very long lists. It works better the Sencha's infinite list.

**olegtaranenko** · 30 Nov 2012 10:24 PM

Originally Posted by Steffen Hiller

There's also https://github.com/robertklep/buffer...sencha-touch-2 if you have very long lists. It works better the Sencha's infinite list.

have tried with last release codebase, it does not work :@
it breaks on the line

Code:

[COLOR=red !important]Uncaught TypeError: Object [object Object] has no method 'getItemElementConfig' BufferedList.js:540[/COLOR][COLOR=red !important]Ext.define.buildItemHtml[/COLOR]BufferedList.js:540
[COLOR=red !important]Ext.define.renderListItems[/COLOR]BufferedList.js:630
[COLOR=red !important]Ext.define.replaceItemList[/COLOR]BufferedList.js:715
[COLOR=red !important]Ext.define.refreemListAt[/COLOR]BufferedList.js:396
[COLOR=red !important]Ext.define.doRefresh[/COLOR]BufferedList.js:212
[COLOR=red !important]Ext.define.doFire[/COLOR]sencha-touch-all-debug.js:14755

may be someone more sophisticated could fix it?

testcase:

Code:

<!DOCTYPE html><html>
<head>
    <meta     http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link   rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.1.0/resources/css/sencha-touch.css">
  <script src="http://extjs.cachefly.net/touch/sencha-touch-2.1.0/sencha-touch-all-debug.js"></script>
    <script src="data/albumdata.js"></script>
    <script src="ux/BufferedList.js"></script>
    <script>
        Ext.setup({
            onReady : function() {
                // define a simple model
                Ext.define('Albums', {
                    extend: 'Ext.data.Model',
                    fields: ['album']
                });


                // define a simple store
                var store = new Ext.create('Ext.data.Store', {
                    config     : {
                        model: 'Albums',
                    },
                    grouper : {
                        groupFn : function(record) {
                            return record.get('album')[0].toUpperCase();
                        },
                    },
                    data: ListTestData
                });


                // showing in desktop os?
                var isDesktop = Ext.os.is.MacOS | Ext.os.is.Windows | Ext.os.is.Linux;


                // create a floating config for desktops
                var baseConfig = isDesktop ? {
                    floating            : true,
                    width                    : 500,
                    height                : 500,
                    centered            : true,
                    modal                    : true,
                    hideOnMaskTap    : false
                } : { 
                    fullscreen : true
                };


                // initialize the main view
                Ext.Viewport.add(Ext.apply({
                    xtype        : 'bufferedlist',
                    grouped    : false,
                    indexBar: false,
                    store        : store,
                    itemTpl    : '{album}'
                }, baseConfig));
            }
        });
    </script>
</head>
<body></body>
</html>

**olegtaranenko** · 1 Dec 2012 12:31 PM

Originally Posted by Steffen Hiller

There's also https://github.com/robertklep/buffer...sencha-touch-2 if you have very long lists. It works better the Sencha's infinite list.

After some investigation have realized that BufferedList total unusable with last 2.1.0 code. It inherits from the Ext.dataview.List but last is radical reworked now (this infinitive mode). That's why the exception from my last post.

Question: who can send me distro sencha-touch-2.1.0-b2.zip ? I can not find it on the site and ever in whole web

Cheers, Oleg

**s.t.a.s** · 2 Dec 2012 12:51 AM

Guys, has anybody tried to turn on graphic acceleration for iOS 6? It seems like Sencha guys forgot to do it. Apple has changed conditions of turning on this important thing:
http://stackoverflow.com/questions/1...tions-in-ios-6

Sencha still use -webkit-transform: translate3d(0,0,0);
But should be
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;

I can't check it right now that's why if somebody tests, it will be great.

P.S.: If somebody knows the same solution for Android 4.x, please, share it.

**s.t.a.s** · 3 Dec 2012 7:12 AM

Originally Posted by s.t.a.s

Guys, has anybody tried to turn on graphic acceleration for iOS 6? It seems like Sencha guys forgot to do it. Apple has changed conditions of turning on this important thing:
http://stackoverflow.com/questions/1...tions-in-ios-6

Sencha still use -webkit-transform: translate3d(0,0,0);
But should be
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;

I can't check it right now that's why if somebody tests, it will be great.

P.S.: If somebody knows the same solution for Android 4.x, please, share it.

Unfortunately, this trick doesn't change situation on iOS. List still twitches even on small data.

**P.verbrugge** · 4 Dec 2012 12:11 AM

We noticed that here at the office too. It runs better on Android, but it's worse on iOS now. In 2.0.1 scrolling was really smooth. Now it sucks. Hope this gets fixed soon.

**siebmanb** · 29 Apr 2013 9:17 AM

We finally found a solution to drastically improve the scrolling experience on both iOS and Android.

First, we stopped using Sencha list and start building our own list with css and divs
Second, we stopped using Sencha scroll (scrollable: false) and used overflow

croll instead (-webkit-overflow-scrolling: touch for iOS) on the parent div.

And then a miracle happened : Android scroll was good again

**profunctional** · 29 Apr 2013 9:27 AM

We actually couldn't find a resolution to this so we ended up going native. If you guys are writing applications with lists I'd highly recommend prototyping quickly to measure performance first. We spent 8 months on development only to find out that performance was too slow.

Native has been the best performance.

**raul@contxt.in** · 3 May 2013 4:16 AM

Hi siebmanb,

I changed to overflow-scroll with scrollable:null and the performance is much better. Nice solucion. However, in Android I have to swipe with two fingers to manage to scroll (haven´t tried in iOS). How did you fix this issue?

Cheers,

Android 4 list is performing worse in ST2 then ST1 (slow scroll)

Thread Tools

Search Thread

Display

Graphic acceleration

Graphic acceleration

Still there

Still there

We switched to Native. Much faster now.

We switched to Native. Much faster now.