Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

    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

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




    Ext version tested:
    • Ext 3.1.1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css

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

    Operating System:
    • Windows Vista


    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('HideButtonsId').setText(buttonsHidden ? 'Show Buttons' : 'Hide Buttons');
        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);
        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'
    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


    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


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

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Redwood City, California


    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


    Anyone found a work around for this?

  6. #6


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

  7. #7
    Sencha User
    Join Date
    Apr 2007


    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


    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
    // then we do our usual job
    // and force a 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 ...


  9. #9


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


  10. #10
    Sencha User
    Join Date
    Jul 2016

    Default EXT js 6

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

    Thank you in advance!

Page 1 of 2 12 LastLast

Posting Permissions

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