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

[SimonDeNooij]

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:

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

__________________

[Eric24]

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.

[Eric24]

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

[Jamie Avins]

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.

[galoch]

Anyone found a work around for this?

[uptodate]

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

[medusadelft]

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)

[michael.piecko]

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):

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

[michael.piecko]

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.

Ext.override(Ext.layout.ToolbarLayout, {

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

}); 

Michael

[kaaoo]

Hello!
I have the same problem with extjs 6?
Could you give me some advances, please?

Thank you in advance!