Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3718 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Vancouver, BC, Canada
    Posts
    32
    Vote Rating
    3
    william.cheung is on a distinguished road

      3  

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

    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Vancouver, BC, Canada
    Posts
    32
    Vote Rating
    3
    william.cheung is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    6
    Vote Rating
    3
    karlshea is on a distinguished road

      3  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Mar 2009
    Posts
    3
    Vote Rating
    2
    jlaguilar is on a distinguished road

      2  

    Default round grouped list display bug

    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;

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    kjlee203 is on a distinguished road

      0  

    Default I want to know when it was fixed.

    I want to know when it was fixed.



  7. #7
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    515
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    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

    Quote Originally Posted by jlaguilar View Post
    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;

  8. #8
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    86
    Vote Rating
    14
    ateodorescu will become famous soon enough

      1  

    Default


    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!
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField

  9. #9
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    515
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default Not Fixed!

    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

  10. #10
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    515
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    Hello, Sencha team. This is NOT fixed in 2.1.1

    John