List Items with height > 47px not rendered correctly.
I just upgraded an app from Sencha Touch 220.127.116.11 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 18.104.22.168, the rendered list items looked like this:
<div class="x-list-item" id="ext-element-20"><div class="x-list-item-label"><img style="float: left; margin-right: 15px" class="eyb-thumbnail" src="/images/items/120/8.jpg" width="120">Sashimi Simples R$33.90<br><span style="color: #666; font-size: 80%;">5 Atum, 5 Salmão e 5 Peixe Branco</span><div style="clear: both"></div></div></div>
Which is pretty beautiful in my opinion, and worked perfectly. In 2.1.0, it gets rendered to this monstrosity:
<div class="x-container x-list-item x-stretched" id="ext-listitem-4" style="min-height: 47px !important; -webkit-transform: translate3d(0px, 166px, 0px); "><div class="x-dock x-dock-horizontal x-stretched" id="ext-element-49"><div class="x-unsized x-list-header x-item-hidden" id="ext-component-16" style="display: none !important; "><div class="x-innerhtml " id="ext-element-51"> </div></div><div class="x-dock-body" id="ext-element-50"><div class="x-inner x-list-item-inner" id="ext-element-48"><div class="x-unsized x-list-item-body" id="ext-component-14"><div class="x-innerhtml " id="ext-element-52"><img style="float: left; margin-right: 15px" class="eyb-thumbnail" src="/images/items/120/8.jpg" width="120">Sashimi Simples R$33.90<br><span style="color: #666; font-size: 80%;">5 Atum, 5 Salmão e 5 Peixe Branco</span><div style="clear: both"></div></div></div></div></div><div class="x-unsized x-item-hidden x-list-disclosure x-dock-item x-docked-right" id="ext-component-15" style="display: none !important; "></div></div></div>
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 22.214.171.124 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.
This css fixed that for me
I'm not using the default css, that's why I had problems