Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    SimonDeNooij is on a distinguished road

      0  

    Default [DEFER-650] Toolbar Overflow does not handle button hide/remove correctly

    [DEFER-650] Toolbar Overflow does not handle button hide/remove correctly


    Picture1.JPG

    Picture2.JPG

    Picture3.JPG

    Picture4.JPG
    Ext version tested:
    • Ext 3.1.1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css


    Browser versions tested against:
    • IE8
    • FF3 (firebug 1.3.0.10 installed)
    • CHROME

    Operating System:
    • Windows Vista

    Description:

    Hide problem:
    I start with a toolbar which shows the overflow menu (See Picture1)
    I hide buttons1-3 (using the setVisible method). The buttons that are inside the overflow menu are NOT hidden (See Picture2).

    If I make the window wider, the overflow menu disappears and the hidden buttons reappear in the toolbar
    If I unhide the buttons, the overflow menu disappears, leaving part of the toolbar invisible (see Picture3)

    Remove problem:
    If I remove buttons from a toolbar which shows the overflow menu, the overflow icon does not disappear (see Picture4)

    Test Case:

    You can reproduce this using the ext eaxamples. Replace \ext\examples\toolbar\overflow.js with the following:

    Code:
    Ext.onReady(function() {
        var buttonsHidden = false;
        var hideShowButtons = function() {
            buttonsHidden = !buttonsHidden;
            Ext.getCmp('Button1Id').setVisible(!buttonsHidden);
            Ext.getCmp('Button2Id').setVisible(!buttonsHidden);
            Ext.getCmp('Button3Id').setVisible(!buttonsHidden);
            Ext.getCmp('HideButtonsId').setText(buttonsHidden ? 'Show Buttons' : 'Hide Buttons');
            Ext.getCmp('toolbarId').doLayout();
        };
        var removeButtons = function() {
            Ext.getCmp('toolbarId').remove(Ext.getCmp('Button1Id'), true);
            Ext.getCmp('toolbarId').remove(Ext.getCmp('Button2Id'), true);
            Ext.getCmp('toolbarId').remove(Ext.getCmp('Button3Id'), true);
            Ext.getCmp('toolbarId').doLayout();
        };
        var p = new Ext.Window({
            title: 'Standard',
            closable: false,
            height: 250,
            width: 500,
            bodyStyle: 'padding:10px',
            contentEl: 'content',
            autoScroll: true,
            tbar: new Ext.Toolbar({
                id: 'toolbarId',
                enableOverflow: true,
                items: [{
                    id: 'HideButtonsId',
                    text: 'Hide Buttons',
                    handler: hideShowButtons
                }, {
                    id: 'RemoveButtonsId',
                    text: 'Remove Buttons',
                    handler: removeButtons
                }, {
                    id: 'Button1Id',
                    text: 'Button 1'
                }, {
                    id: 'Button2Id',
                    text: 'Button 2'
                }, {
                    id: 'Button3Id',
                    text: 'Button 3'
                }]
            })
        });
        p.show();
    });
    Steps to reproduce the problem:
    • Replace \ext\examples\toolbar\overflow.js with the code above
    • make window small enough, so one or more buttons are in overflow
    • Use the hide and remove buttons

    Screenshot or Video:
    • attached (Picture1-4)

    Debugging already done:
    • none

    Possible fix:
    • not provided
    __________________

  2. #2
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    Confirmed bug still exists in 3.1.2. Also, it may have something to do with dynamically adding/removing buttons. When first rendered from the config, the toolbar correctly displays the visible buttons on the toolbar. Hidden buttons are not displayed on the overflow menu (as expected), but neither are disabled buttons! But after removing and adding one visible button, all the buttons appear on the toolbar (even the hidden ones, which are still showing hidden=true upon FB inspection) and the overflow menu button disappears regardless of window width.

  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    This bug remains in 3.2.0. Any estimate on a fix?

  4. #4
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    No estimate at this time, the overflow method has never handled this properly. We are working on a refactor of this method for a future release but I'm unsure if it will be on a minor or major release milestone at this time.

  5. #5
    Ext User
    Join Date
    Dec 2009
    Posts
    3
    Vote Rating
    0
    galoch is on a distinguished road

      0  

    Default


    Anyone found a work around for this?

  6. #6
    Ext User
    Join Date
    Feb 2009
    Posts
    56
    Vote Rating
    0
    uptodate is on a distinguished road

      0  

    Default


    i have the same problem with ExtJs 3.2.1, there are now a solution ?

  7. #7
    Sencha User
    Join Date
    Apr 2007
    Posts
    172
    Vote Rating
    1
    medusadelft is on a distinguished road

      0  

    Default


    I have a overflow button in a toolbar for a tree, it doesn't even execute the code behind the button. When I make the panel wider and the button is available in the toolbar, the code behind it works. Should this be a seperate bug report or is this, like all toolbar-overflow issues deferred to Ext4.0????? (like mentioned in another thread by Jamie)

  8. #8
    Sencha User
    Join Date
    Mar 2008
    Posts
    24
    Vote Rating
    0
    michael.piecko is on a distinguished road

      0  

    Default


    Hi, i'd like to offer my solution to this problem. It's not clean, but it works for me.

    The problem arise, when you dynamically remove a hidden item (overflow) from the toolbar. After hours of digging i think i found the root of this problem. The Ext.layout.ToolbarLayout class keeps track of hidden items in a "hidden" property (array). When an item is added beyond the visible area, the item will have a "xtbHidden = true" property and it is pushed to the "hidden" array mentioned above.

    As soon as you remove this item from the toolbar (remember it is hidden), the "xtbHidden" property is removed from the item and it is removed from the toolbar item collection BUT NOT from the "hidden" array! So as soon as the doLayout method is called, the toolbar is still thinking, that there are hidden elements and therefore it shows the "more" button.

    So here is what i've done (sorry, no real code because it depends on your situation):
    Code:
    var toolbar = Ext.Toolbar
    var item    = Ext.Toolbar.Item
    
    // ... item is added, but hidden, so the "more" button shows up
    
    // to remove the item we first check if it is hidden
    if (item.xtbHidden == true) {
    
        // if so, then we manually remove it from the hidden array in the layout
        toolbar.getLayout().unhideItem(item);
    }
    
    // then we do our usual job
    toolbar.remove(item)
    
    // and force a doLayout
    toolbar.doLayout()
    Look at the hideItem() and unhideItem() methods of the Ext.layout.ToolbarLayout class for more info. I think the toolbars remove() method should check for hidden items and remove them there aswell. This should do the job. Hope this will help others ...

    Michael

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    24
    Vote Rating
    0
    michael.piecko is on a distinguished road

      0  

    Default


    This issue can be solved with the following code. All hidden items need to be removed from an internal array, before they are removed from the toolbar. This is done with unhideItem(). After that the overflow menu works as expected.
    PHP Code:
    Ext.override(Ext.layout.ToolbarLayout, {

        
    onRemove: function(c){
            if(
    c.xtbHidden){
                
    this.unhideItem(c);
            }
            
    Ext.layout.ToolbarLayout.superclass.onRemove.call(thisc);
        }

    }); 
    Michael