High Performance Large List component - UxBufferedList

[jeroenwalter]

Shouldn't be a problem, as long as you adhere to the List and the itemtemplate mechanism it uses.
I show for each item an image with a couple of lines of text.

For a screenshot:

http://www.badaap.nl/wordpress/wp-co...let_series.jpg

The list on the right is the buffered list and loads 500 items per 'page'. So after scrolling down 500 items, 500 new items are loaded.

The list on the left too, but it loads all items at once. But it shows the index bar and grouping working with the buffered list.

[Choda]

Alright so, tested it on a list containing 80 pictures, 3 per row, it doesn't work I'm afraid. The framerate drops to 0 essentially, scrolling is choppy and often just freezes completely.

EDIT: For reference, this is my code:

var picStore = Ext.create('Ext.data.Store', {
            storeId: 'picStore',
        id: 'pic_store',
            fields: ['id', 'size', 'src'],
         });

		var picContainer = Ext.create('Ext.ux.BufferedList', {
			inline: true,
			margin: 0,
			padding: 0,
			id: 'pic_container',
			store: 'picStore',
			itemTpl: '<div style="margin: 0; padding 0; width:{size}px; height:{size}px;  background-image: url({src}); background-size: cover; background-position: center;"></div>',
			listeners: {
				select: this.handleSelect,
			},
			
		});

Tried changing the itemTpl to something like '{src}' only, didn't help.

[jeroenwalter]

Alright so, tested it on a list containing 80 pictures, 3 per row, it doesn't work I'm afraid. The framerate drops to 0 essentially, scrolling is choppy and often just freezes completely.

But it does scroll.... you previously said it didn't scroll.
So you basically have a performance issue, not a functionality issue.

Do you have large images?
Or css box shadows or round corners or gradients? Those are performance killers with scrolling

[Choda]

Just edited my post, none of that. But honestly, I can't say if it's scrolling a all... sometimes when I drag down (i.e. trying to scroll up), nothing happens for a few seconds, then it scrolls a few pixels in the opposite direction... If it's a performance issue, than it's a CRIPPLING issue, one which the normal list doesn't have.

And no, images are small thumbnails, that CSS there, coupled with a bit of float / margin stuff to make them line up properly is all there is =/

[jeroenwalter]

You may try to set the maxItemHeight config option of the buffered list to the expected height of an item, maybe that helps?

You can also take a look at my code, maybe you'll see something that helps.

The entire project:
https://github.com/jeroenwalter/Comi...bViewer/tablet

The list:
https://github.com/jeroenwalter/Comi...w/ComicList.js

[jeroenwalter]

O, btw, you did enable the listpaging plugin and are using a data proxy?
Because otherwise it just may be that the list renders ALL items instead of only a small portion.

[suzzer99]

For what it's worth, I have been testing the new Sencha List in Touch 2.1 beta 3. We still need the UxBuffered list for some of the Androids we test on.

We have a channel list with about 1200 items. From what I can tell on the problem Androids (HTC LTE), the new Sencha List performs about the same as the old Sencha List. The UxBuffered list does work fine extending the new List.

For us anyway it looks like most Androids will be able to render a list of 1200 without seizing up fairly soon.

The only reason I really want to switch is there's a bug in the UxBuffered list where if you click a letter on the Index Bar that has no associated items - the list goes blank until the user scrolls a little.

[jep]

Anyone know if packaging your app as a native app using PhoneGap gets around any of this performance problems (in 2.1 beta 3 or otherwise), or if the embedded browser has the exact same drawbacks?