Issue with Scroller Component and large content in Sencha Touch

Question

I have an Sencha Touch application, with a simple panel.

var scrolling = new Ext.Application({
        launch : function () {

            var titlebar = {
                dock : 'top',
                xtype : 'toolbar',
                title : 'Scrolling Test'
            };

            new Ext.Panel({
                    fullscreen : true,
                    id : 'panel',
                    scroll : {
                        direction : 'vertical',
                        eventTarget : 'parent'
                    },
                    dockedItems : [titlebar],
                    styleHtmlContent : true,
                    html : ''
                });
        }
});

This panel is populated with a Ext.Ajax.request response.

Ext.Ajax.request({
    url : 'largefile.html',
    success : function (response) {
        Ext.getCmp('panel').update(response.responseText);
    },
    failure : function (response) {}
});

The response has around 1,6 MB of text. Yes, it's too much content. However, when I try to run it in ipad 1, after panel load, the scroll effect does not run smoothly. It freezes for 1~2 sec , scroll a bit, freezes again and then, finish.

I tried to measure the panel's fps, using

panel.scroller.getLastActualFps();

On Chrome browser, method returns ~ 60 fps. On iPad, method returns ~0.25 fps.

I was thinking to build a 'lite' scroller component, disabling a lot of events and listeners. What do you think? The Scroller Component actually has this problem for large content?

Answer 1

I have the same issue and found that default fps (frames per second) interval is 80! for iOS and it means that sencha scroller run setInterval(someDecelerationAndBouncingFunction, 1000/80) 80 times per second.

I'd suggest to try less fps option. say 25

scroll : {
             direction : 'vertical',
             eventTarget : 'parent',
             fps : 25,
         },

in my case it resolved issue.

Btw, the same issue I had with iScroll and TouchScroll...