VStack/VLayout with lots of members

[tgilbert]

Hi,

I would like to know what is the recommended way to create a large stack of elements. We have a panel which might contain lots of members (organised vertically and which cannot be considered as table rows) and as soon as it's getting bigger (e.g. 100+) it starts also getting a lot slower. I presume that it's because the layout recomputes all the heights etc... everytime a new member is added.

Any feedback is welcome,
Thanks,

Thomas

PS: We are using SGWT Power Edition 4.1

[Isomorphic]

Sorry, this isn't enough information to answer the question.

Some of the basics we'd need to know:

1. are these elements fixed-size?

2. what's the maximum number that might be involved?

3. why do you think they "cannot be considered as table rows"? What requirement do you have that you think table rows cannot fulfill?

4. are the elements all being added at once, or a bit at a time?

[tgilbert]

All right!

- The height is fixed, the width is set to width100() (the container is resizable). Each item is currently an HLayout.
- There's currently no limit, but we'll probably put one (rather high)
- Regarding the table, well it was just an assumption (maybe wrong!). I was more talking about the table as a grid (with columns, selection, paging...) than an HTML table...
- And eventually, yes, the records do usually come 1 at a time, though in certain circunstances you can get several dozens in 1 sec (but still 1 at a time). You can consider it a little bit like an event feed.
- Please also note that this information is volatile, it's not stored in a data store (db/file) nor in the session.

Thanks,

[Isomorphic]

With the information you've shared so far, this sounds like a job for a ListGrid. You can use a single column, and if the header does not apply, showHeader:false gets rid of it.

Whatever should appear in each widget/row can be the result of a CellFormatter applied to the single column you'll be using, or if you need something more complicated with interactivity beyond a simple rollover and click, using showRecordComponents gives you access to the ListGrid's built-in record component pooling behavior (recordComponentPoolingMode:"recycle") to efficiently re-use components to display new events.

Having said all that, there's no particular reason that a VStack of components should be slow, or why it should slow down when more components are involved, so with your current approach you might just have some kind of simple coding error that could be corrected to fix the slowdown. An example might be that, even though every component is fixed height, you may have autosizing activated anyway - to avoid this, set a specific height along with overflow:hidden.