PDA

View Full Version : prerender cards with large vertical scroll content.



omulriain
6 Oct 2010, 1:45 PM
I currently have a carousel with large templated tables 500 rows on each card. They are vertically scrollable. I am having an issue where the interface stalls and renders each section on scroll. If I scroll to the bottom through all this jerkiness the scroll back up is smooth. Then when I switch to another similar card it is the same thing.

The carousel itself does horizontal card switching, the panels that make up the cards are vertically scrollable.

Is there a way to tell sencha touch to render the entire html table so the scrolling is smoother? It is a panel with a template declaration loading a json data request.

If I can't resolve this issue I will have to look into a different technologie for my prototype.

evant
6 Oct 2010, 2:39 PM
The cards are already rendered:



Ext.setup({
onReady: function(){
new Ext.Carousel({
fullscreen: true,
items: [{
html: 'a',
id: 'a'
},{
html: 'b',
id: 'b'
},{
html: 'c',
id: 'c'
}]
});

console.log(Ext.get('a').select('.x-panel-body').first().getHTML());
console.log(Ext.get('b').select('.x-panel-body').first().getHTML());
console.log(Ext.get('c').select('.x-panel-body').first().getHTML());
}
});

omulriain
6 Oct 2010, 3:07 PM
then why is scrolling so choppy and drawing causes a pause? I get white boxes and pauses when scrolling. Is there something that can be done to fix that. Like predraw or something. Even though the component is rendered something in sencha is redrawing it because I don't get this when scrolling a large table in plain html.

I know that a simple example with html: 'a', will render very smoothly. There is nothing impressive about that.

I can post a var declaration that will cause this if you need me to. or you can create a big Ole table with 500 rows and data with some minor styles to put on each card and you will see the effect I am talking about.

var timelineTemplate = new Ext.XTemplate(
'<table width="100%" border="1">',
'<tpl for=".">',
'<tr colspan="121"><td class="the-header" colspan="1"><strong>{SomeThing}</strong></td>',
'<td class="the-header" colspan="30" width="22.5%">{Something2}</td>',
'<td class="the-header" colspan="30" width="22.5%">blah</td>',
'<td class="the-header" colspan="30" width="22.5%">blah</td>',
'<td class="the-header" colspan="30" width="25%">{Something3}</td>',
'</tr>',
'<tpl for="SomeArray">',
'<tr>',
'<td class="something">{something5}</td>',
'<tpl for="SomeOtherArray">',
'<td class="tdclass" colspan="{somenumber}" ><div class="noOverflow">{something6}</div></td>',
'</tpl>',
'</tr>',
'</tpl>',
'</tpl>',
'</table>'
);
then feed it 500 stuffs.

mikeyroy
6 Oct 2010, 3:11 PM
I'll second that issue. When the choppiness happens, logcat (android) says: Miss a drag as we are waiting for WebCore's response for touch down. I don't know if this is something that has to do with Android, or Sencha, it's definitely worse on some devices than others.

omulriain
7 Oct 2010, 7:28 AM
I want a real answer not your typical "you are stupid so here is the most basic inappropriate example I can give you" answer.

raven77m
7 Oct 2010, 9:20 AM
I want a real answer not your typical "you are stupid so here is the most basic inappropriate example I can give you" answer.
LOL!!
BTW, I have this problem with iphone 4 running the latest software but its all over the phone. Not just Sencha.
Every website longer then 2 swipes does this...

mikeyroy
7 Oct 2010, 11:58 AM
LOL!!
BTW, I have this problem with iphone 4 running the latest software but its all over the phone. Not just Sencha.
Every website longer then 2 swipes does this...
That's interesting raven. The app I'm working on is quite large, by the time you reach the big lists, you've gone through 6-7 screens, and with close to 1000 items split amongst 7 different lists on a tabpanel, the thing just doesn't render, however if you go to this tabpanel directly after an initial home screen (totally out of the regular flow, just for testing) it renders fine and the lists scroll reasonably well on our most troublesome device. This was after removing an image that was on each list item, and changing the height from roughly 60px to 40px. So I'm going to now be looking into ways to lower Sencha's footprint. Looking at memory usage on the phone, it fluctuates between 20 & 35 Mb of RAM! That's more than double Facebook and other native apps. I should note the tabpanel not rendering is on our most troublesome device, but it's a popular enough phone that we have to find a reasonable solution for it.

mikeyroy
7 Oct 2010, 2:36 PM
I currently have a carousel with large templated tables 500 rows on each card. They are vertically scrollable. I am having an issue where the interface stalls and renders each section on scroll. If I scroll to the bottom through all this jerkiness the scroll back up is smooth. Then when I switch to another similar card it is the same thing.

The carousel itself does horizontal card switching, the panels that make up the cards are vertically scrollable.

Is there a way to tell sencha touch to render the entire html table so the scrolling is smoother? It is a panel with a template declaration loading a json data request.

If I can't resolve this issue I will have to look into a different technologie for my prototype.

Try running Ext.Element.garbageCollect(); before you pull up the Panel with your long list, I just discovered it and am finding this to help tremendously.

evant
7 Oct 2010, 9:17 PM
@omulriain

Really, was there any need for that? Your original post implied that the cards weren't being rendered at runtime.

Anyway, I can see that in some cases the scrolling is sluggish due to some repainting of the screen during a scroll.