Issue with Scroller Component and large content in Sencha Touch
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 : ''
开发者_Python百科 });
}
});
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?
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...
精彩评论