List Items with height > 47px not rendered correctly.

I just upgraded an app from Sencha Touch 2.0.1.1 to 2.1.0, no code changes, and it broke the rendering of my List items. This is a restaurant menu app that shows pictures inside list items, typically resulting in a x-list-item height of 140px. With 2.0.1.1, the rendered list items looked like this:

Which, apart from the awful "!important" CSS, and the unnecessary DIV nesting, simply doesn't work. The -webkit-transform CSS used to position the list items starts with the default spacing of 47px per list item, and when you scroll the list somewhat this gets recalculated to the 140px actual list item size gap, _if_ the list is long enough so that you can scroll it to force the recalculation.

IMHO the 2.0.1.1 solution was much cleaner both in the HTML it generated and in how it actually works, which is by allowing the items to flow instead of absolutely positioning them.

Partial solution and another bug uncovered

Browsing through the source code I found the (documented) config "itemHeight" which in my case works (at least for most items) as the heights in this specific list are constant. So just setting that (in this case to 114) made the initial rendering of the list almost correct.

The new bug is that when you set the itemHeight, _and_ have grouped items (yes I have those :P), the first item in the group is not positioned correctly because the group header seems to be a part of the list item itself. As with the initial rendering problem, this is all fixed when you scroll the list up and down some. The problem here is that the x-list-header is being rendered _inside_ the x-list-item.

I tried using the variableHeights and refresh() suggestions and they didn't work for me. Ingo could you supply a snippet showing how you use refresh()? I tried it on the console and nothing happened.

The new absolutely positioned list items seem to try to guess what the DOM elements will be rendered to, and this will break in a lot of cases. I'd rather then not try to calculate those in advance and leave it to the browser to adjust the heights at actual render time. The rendering only happens once so it should not be very expensive.

I indeed also tried setting 'itemHeight' and although this does what it promises, I preferably do not use it. Just because I use percentages for my width values in my item template, so the content scales nicely with the end-users resolution. If I set the items height to a fixed value that of course stops working.

Using the refresh function is not an option since I am working with a NestedList and this function seems to be only present in the List component. Thanks for your suggestion though. Switching back to 2.0.1 seems to be the best solution for now.

Basically you have to push all list items into the "updateItems" array and the force an update. There are still big problems with this. First, it only worked deferred, even when called from the "painted" event. In my box I'm deferring this by 100ms:

Second, if you resize the browser window, the wrong sizes actually _come back_ to haunt you. So you have to fire this in the "resize" event also. Lots of blinking. But, it's a starting point for getting this fixed, now we need to clean it up. I'll look into hooking up other events to get rid of the defer, but I must say I was really disappointed that the "painted" event is not ready for DOM lookups yet, being that the description for the event states exactly that.