Results 1 to 4 of 4

Thread: Segmented button issue when hiding its buttons

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3158 in a recent build.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Washington, DC
    Posts
    11

    Default Segmented button issue when hiding its buttons

    REQUIRED INFORMATION
    • sencha-touch-2.0.1.1
    • Others most probably affected
    Browser versions tested against:
    • Chrome
    • Doesn't matter
    DOCTYPE tested against:
    • Doesn't matter
    Description:
    • When show/hide buttons into segmented button, the buttons borders become wrong.
    Steps to reproduce the problem:
    • Show/Hide random buttons
    The result that was expected:
    • Consistent look & feel
    The result that occurs instead:
    • Buttons border becomes wrong
    HELPFUL INFORMATION

    Possible fix:

    Code:
        // @private
        updateFirstAndLastCls: function(items) {
            var ln = items.length,
                basePrefix = Ext.baseCSSPrefix,
                item, i;
    
    
            //Remove classes
            for (i = 0; i < ln; i++) {
                item = items.items[i];
                item.removeCls(basePrefix + 'first');
                item.removeCls(basePrefix + 'last');
            }
    
    
            //add a first cls to the first non-hidden button
            for (i = 0; i < ln; i++) {
                item = items.items[i];
                if (!item.isHidden()) {
                    item.addCls(basePrefix + 'first');
                    break;
                }
            }
    
    
            //add a last cls to the last non-hidden button
            for (i = ln - 1; i >= 0; i--) {
                item = items.items[i];
                if (!item.isHidden()) {
                    item.addCls(basePrefix + 'last');
                    break;
                }
            }
        },
    * or *

    Code:
        updateFirstAndLastCls: function(items) {
            var ln = items.length,
                basePrefix = Ext.baseCSSPrefix,
                item, i, first, last;
    
    
            //add a first cls to the first non-hidden button
            for (i = 0; i < ln; i++) {
                item = items.items[i];
                if (!item.isHidden()) {
                    item.addCls(basePrefix + 'first');
                    item.removeCls(basePrefix + 'last');
                    first = i;
                    break;
                }
            }
    
    
            //add a last cls to the last non-hidden button
            for (i = ln - 1; i >= 0; i--) {
                item = items.items[i];
                if (!item.isHidden()) {
                    if (i != first)
                        item.removeCls(basePrefix + 'first');
                    item.addCls(basePrefix + 'last');
                    last = i;
                    break;
                }
            }
    
    
            //Remove classes
            for (i = first + 1; i < last; i++) {
                item = items.items[i];
                item.removeCls(basePrefix + 'first');
                item.removeCls(basePrefix + 'last');
            }

    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • All

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    Thanks for the report.

    Code:
    Ext.Viewport.add({
        xtype : 'container',
        items : [
            {
                xtype : 'segmentedbutton',
                items : [
                    {
                        text : 'One'
                    },
                    {
                        text : 'Two'
                    },
                    {
                        text : 'Three'
                    }
                ]
            },
            {
                height : 10
            },
            {
                xtype   : 'button',
                text    : 'Hide 2nd',
                handler : function (button) {
                    var cnt = button.up('container'),
                        seg = cnt.down('segmentedbutton'),
                        btn = seg.down('[text=Two]');
    
                    btn.setHidden(true);
                }
            },
            {
                xtype   : 'button',
                text    : 'Show 2nd',
                handler : function (button) {
                    var cnt = button.up('container'),
                        seg = cnt.down('segmentedbutton'),
                        btn = seg.down('[text=Two]');
    
                    btn.setHidden(false);
                }
            },
            {
                xtype   : 'button',
                text    : 'Hide 3rd',
                handler : function (button) {
                    var cnt = button.up('container'),
                        seg = cnt.down('segmentedbutton'),
                        btn = seg.down('[text=Three]');
    
                    btn.setHidden(true);
                }
            },
            {
                xtype   : 'button',
                text    : 'Show 3rd',
                handler : function (button) {
                    var cnt = button.up('container'),
                        seg = cnt.down('segmentedbutton'),
                        btn = seg.down('[text=Three]');
    
                    btn.setHidden(false);
                }
            }
        ]
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    This seems to be an issue with onAfter not working correctly. Looking into it.

    Thanks!
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Fixed, thank you!
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •