hide/show toolbars doesn't update layout

[chrisface]

Hi there,


When I have toolbars added to a panel, showing and hiding the toolbars doesn't seem to cause the panel to do a doLayout() and the toolbars either leave space when they are hidden or fail to claim space from the body of the panel when they are being shown again. When tested in a window component, you can trigger the panel to refresh the layout by re-sizing the window but calling doLayout() doesn't have the same result.


Has anybody seen this bug before and know of a resolution for Extjs-4.07? I seems to be a problem for all sub classes of Panel whether they are in a window or wrapped in some other container.

Test code:

Ext.onReady(function() {


  var topToolbar = new Ext.toolbar.Toolbar({
    items: [
      {
        text: 'top button'
      }
    ]
  });


  var bottomToolbar = new Ext.toolbar.Toolbar({
    items: [
      {
        text: 'bottom button'
      }
    ]
  });
 
  var testWindow = new Ext.window.Window({
    width: 800,
    height: 600,
    items: [
      {
        xtype: 'button',
        text: 'toggle visibility',
        scope: this,
        handler: function(){
          topToolbar.setVisible(topToolbar.hidden);   
          bottomToolbar.setVisible(bottomToolbar.hidden);
        }
      }
    ],
    tbar: topToolbar,
    bbar: bottomToolbar  
  });


  testWindow.show();   
});

[mitchellsimoens]

Try this:

        var topToolbar = new Ext.toolbar.Toolbar({
            items: [
                {
                    text: 'top button'
                }
            ]
        });


        var bottomToolbar = new Ext.toolbar.Toolbar({
            items: [
                {
                    text: 'bottom button'
                }
            ]
        });

        var testWindow = new Ext.window.Window({
            width: 800,
            height: 600,
            items: [
                {
                    xtype: 'button',
                    text: 'toggle visibility',
                    scope: this,
                    handler: function(){
                        topToolbar.setVisible(topToolbar.hidden);
                        bottomToolbar.setVisible(bottomToolbar.hidden);
                        testWindow.doComponentLayout();
                    }
                }
            ],
            tbar: topToolbar,
            bbar: bottomToolbar
        });


        testWindow.show();

My fix is in red and worked for me in 4.0.7 with Chrome. Also note that without that line in 4.1.0 beta3 the layout was updated automatically.

[chrisface]

Thanks for the fix It worked fine in the example and for one of my screens. Strangely though it didn't seem to work for another very similar screen that is seeing the same problem. I had assumed that the bug was the same for both and didn't provide two examples.

The difference in this one is that the Window has two panels and is using a vbox for the layout. The toolbars are then in the first component and not on the window. The same thing as before happens but in the first panel.

I attempted calling doComponentLayout() at different levels of this example but it didn't seem to have the same effect.

Am I missing something similar again?

var toggleToolbars = function() {
    editToolbar.setVisible(editToolbar.hidden);
    cancelToolbar.setVisible(cancelToolbar.hidden);
    testWindow.doComponentLayout();
};


var editToolbar = new Ext.toolbar.Toolbar({
    items: [
        {
            text: 'Edit',
            scope: this,
            handler: toggleToolbars
        }
    ]
});


var cancelToolbar = new Ext.toolbar.Toolbar({
    hidden: true,
    items: [
        {
            text: 'Cancel',
            scope: this,
            handler: toggleToolbars
        }
    ]
});


var testWindow = new Ext.window.Window({
    title: 'Toolbar Test',
    width: 800,
    height: 600,
    bodyPadding: 10,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
        {
            flex: 1,
            html: 'Section 1',
            bbar: cancelToolbar,
            tbar: editToolbar
        },
        {
            flex: 1,
            html: 'Section 2',
            style: {'padding-top': '10px'}
        }
    ]
});
testWindow.show();

[jsakalos]

This is what I get. Is it wrong?



My test case:

<!DOCTYPE html>
<!-- hide-toolbar.html -->
<html>
<head>
    <title>Example by Saki</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4.1.0/resources/css/ext-all.css" type="text/css">
    <link rel="shortcut icon" type="image/png" href="../Icon.png">
    <script type="text/javascript" src="ext-4.1.0/ext-all-dev.js"></script>
    <script type="text/javascript">

    
    // entry point
    Ext.onReady(function() {
        var toggleToolbars = function() {
            editToolbar.setVisible(editToolbar.hidden);
            cancelToolbar.setVisible(cancelToolbar.hidden);
            testWindow.doComponentLayout();
        };


        var editToolbar = new Ext.toolbar.Toolbar({
            items: [
                {
                    text: 'Edit',
                    scope: this,
                    handler: toggleToolbars
                }
            ]
        });


        var cancelToolbar = new Ext.toolbar.Toolbar({
            hidden: true,
            items: [
                {
                    text: 'Cancel',
                    scope: this,
                    handler: toggleToolbars
                }
            ]
        });


        var testWindow = new Ext.window.Window({
            title: 'Toolbar Test',
            width: 800,
            height: 600,
            bodyPadding: 10,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    flex: 1,
                    html: 'Section 1',
                    bbar: cancelToolbar,
                    tbar: editToolbar
                },
                {
                    flex: 1,
                    html: 'Section 2',
                    style: {'padding-top': '10px'}
                }
            ]
        });
        testWindow.show();
            
    }); // eo onReady
    
    </script>
</head>
<body>
</body>
</html>
<!-- eof -->

[chrisface]

Yes that's exactly what i want. The only difference is that your example was using 4.1.0 and I was using 4.07 where it doesn't seem to work.

[jsakalos]

I believe that it is not very long until 4.1 final will be released so if you can wait don't waste time to fix it in 4.0.

[chrisface]

Thanks for the suggestion. If you think it's going to be quite soon for 4.1 then we're happy waiting. We've been trying to minimize the numbers of bugs we have in 4.07 as we've not been sure if 4.1 will come out in time for our release. Upgrading to 4.1 is our priority but the betas have been a bit too unstable for our liking so we've been holding back.

Thanks for the help everybody

[jsakalos]

Don't take it as an official statement of Sencha. It is just my personal opinion - we have beta 3 out and it seems quite stable already.

[chrisface]

I'll keep that in mind!