Results 1 to 9 of 9

Thread: hide/show toolbars doesn't update layout

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Location
    Aberdeen, Scotland
    Posts
    18

    Default hide/show toolbars doesn't update layout

    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:
    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();   
    });

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

    Default

    Try this:

    Code:
            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.
    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
    Join Date
    Dec 2010
    Location
    Aberdeen, Scotland
    Posts
    18

    Default

    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?


    Code:
    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();

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    This is what I get. Is it wrong?



    My test case:
    HTML Code:
    <!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 -->
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Sencha User
    Join Date
    Dec 2010
    Location
    Aberdeen, Scotland
    Posts
    18

    Default

    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.

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #7
    Sencha User
    Join Date
    Dec 2010
    Location
    Aberdeen, Scotland
    Posts
    18

    Default

    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

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #9
    Sencha User
    Join Date
    Dec 2010
    Location
    Aberdeen, Scotland
    Posts
    18

    Default

    I'll keep that in mind!

Tags for this Thread

Posting Permissions

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