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

Printable View

Show 40 post(s) from this thread on one page

30 Nov 2012, 2:48 PM
s.t.a.s

Quote:

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.
30 Nov 2012, 2:56 PM
Steffen Hiller

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.
30 Nov 2012, 10:24 PM
olegtaranenko
Quote:

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>
1 Dec 2012, 12:31 PM
olegtaranenko

Quote:

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
2 Dec 2012, 12:51 AM
s.t.a.s

Graphic acceleration

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.
3 Dec 2012, 7:12 AM
s.t.a.s

Still there

Quote:

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. :(
4 Dec 2012, 12:11 AM
P.verbrugge

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.
29 Apr 2013, 9:17 AM
siebmanb

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:scroll instead (-webkit-overflow-scrolling: touch for iOS) on the parent div.

And then a miracle happened : Android scroll was good again B)
29 Apr 2013, 9:27 AM
profunctional

We switched to Native. Much faster now.

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.
3 May 2013, 4:16 AM
raul@contxt.in

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,

Show 40 post(s) from this thread on one page