Sencha Touch 2.1 List using ui = round has problems with styling

[william.cheung]

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?

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[william.cheung]

Thanks. Is there a Tracking number to track when it will be fixed?

[karlshea]

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.

[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;

[kjlee203]

[BostonMerlin]

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

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;

[ateodorescu]

Hi,

We have solved this by changing the code in findGroupHeaderIndices (v 2.1) of the dataview.List component:

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!

[BostonMerlin]

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

[BostonMerlin]

Hello, Sencha team. This is NOT fixed in 2.1.1

John