Success! Looks like we've fixed this one. According to our records the fix was applied for
TOUCH-3718
in
a recent build.
-
Sencha Premium Member
Sencha Touch 2.1 List using ui = round has problems with styling
When using ui = normal in the Ext.dataview.List control, it styles properly. When using ui = round in the same control, the selected style is not done properly. It was working in 2.0.x release. I'm thinking that due to the changes in this control, this particular ui style was missed. What is the proper fix?
-
Thanks for the report! I have opened a bug in our bug tracker.
-
Sencha Premium Member
Thanks. Is there a Tracking number to track when it will be fixed?
-
Sencha User
Fix:
resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss
Line 295 becomes
&.x-list-item-first .x-dock-horizontal {
Line 299 becomes
&.x-list-item-last .x-dock-horizontal {
It was using :first-child and :last-child, but that selector doesn't work anymore now that the DOM structure has changed with infinite scrolling.
-
Sencha User
round grouped list display bug
There are even more styling bugs when using 'round' ui in grouped lists.
If your first group in the list has only one item, that group will be displayed attached to the next group (without any bottom padding) because the CSS property .x-list-footer-wrap is not added to the item. The bug is in the calculation of the list of footerIndices in the function findGroupHeaderIndices in the file /touch/src/dataview/List.js
You can add the following code in the funciton findGroupHeaderIndices to calculate the footerIndices correctly:
lastGroupItem = (groups[i].children.length) - 1;
lastGroupedRecord = groups[i].children[lastGroupItem];
storeIndex = store.indexOf(lastGroupedRecord);
footerIndices[storeIndex] = true;
-
Sencha User
I want to know when it was fixed.
-
Rock on garth, thanks for the fix. I was hitting this same bug. Spent hours trying to figure out why.. thinking it had to do with my stores grouping logic. You deserve an up vote, and now you have your first! John

Originally Posted by
jlaguilar
There are even more styling bugs when using 'round' ui in grouped lists.
If your first group in the list has only one item, that group will be displayed attached to the next group (without any bottom padding) because the CSS property .x-list-footer-wrap is not added to the item. The bug is in the calculation of the list of footerIndices in the function findGroupHeaderIndices in the file /touch/src/dataview/List.js
You can add the following code in the funciton findGroupHeaderIndices to calculate the footerIndices correctly:
lastGroupItem = (groups[i].children.length) - 1;
lastGroupedRecord = groups[i].children[lastGroupItem];
storeIndex = store.indexOf(lastGroupedRecord);
footerIndices[storeIndex] = true;
-
Sencha User
Hi,
We have solved this by changing the code in findGroupHeaderIndices (v 2.1) of the dataview.List component:
Code:
findGroupHeaderIndices: function() {
var me = this,
store = me.getStore(),
storeLn = store.getCount(),
groups = store.getGroups(),
groupLn = groups.length,
headerIndices = me.headerIndices = {},
footerIndices = me.footerIndices = {},
i, previousIndex, firstGroupedRecord, storeIndex;
me.groups = groups;
for (i = 0; i < groupLn; i++) {
firstGroupedRecord = groups[i].children[0];
storeIndex = store.indexOf(firstGroupedRecord);
headerIndices[storeIndex] = true;
previousIndex = storeIndex - 1;
if (previousIndex >= 0) {
footerIndices[previousIndex] = true;
}
}
footerIndices[storeLn - 1] = true;
return headerIndices;
},
The red line is what we have changed to fix this.
Cheers!
-
Not Fixed!
I'm still seeing this issue with 2.1.1 where the selected list item does not highlight, instead, 3d style is applied to the list items text. Is there a workaround?
thanks
John
-
Hello, Sencha team. This is NOT fixed in 2.1.1
John