ee3a84w
Friday, January 9, 2009

[2.0]layout when showing / hiding a toolbar in tabPanel

  • Hi,

    I have added the following code to the onTabChange event of a tabpanel.

    onTabchange : function(tabPanel, tab){
    if(tab.id === 'dashboard'){
    tabPanel.getTopToolbar().hide();
    }
    else
    {
    tabPanel.getTopToolbar().show();
    }
    }


    however, when the toolbar is shown, it pushes the panel below it down an equivalent amount. How should I do this better?

    I tried calling doLayout on the tabPanel after showing / hiding the toolbar, but it doesn't seem to have any effect.

    Thanks,
    Joshua


  • Hi Saki,

    Thanks for picking up this thread. I was just looking at this very issue again. I had tried a couple of things along the same lines but got as far as this:

    onTabchange : function(tabPanel, tab){
    if(tab.id === 'dashboard'){
    tabPanel.getTopToolbar().hide();
    }
    else
    {
    tabPanel.getTopToolbar().show();
    }
    Ext.getCmp('doc-body').setHeight(
    Ext.get(document.body).getBox().height // body height
    -Ext.getCmp('doc-body').y // - top
    -5 // - padding
    )

    }


    It really slows down the tab change though, so I'm trying to think of alternatives.

    Perhaps having a toolbar on the 'dashboard' page might be an idea. It would have to be a different toolbar though. I'll have to see how to switch toolbars instead of hiding the one. Also will have to check the performance issues of this.

    Joshua


  • Joshua -

    I'm curious to find out what your toolbar looked like when you first created it. Adding an initially blank Toolbar is not supported at this time but it has caused a number of issues for people. Possibly you? Therefore we are looking to add it in a future release.


  • Cannot say for sure as I've never tried but it should as you don't need to lookup components and your run within Panel only. However, reverse can be true either. There is no other way to know but try.


  • Cool Saki. Thanks for the help!

    I'll try it out and if I can find a solution this way, definitely post it

    Cheers,
    Joshua


  • The another route could be to extent the Panel class and add method "autoSize" or "refreshHeight" that would recalculate height depending on visibility of the toolbar.


  • Hi Aaron,

    Thanks for the asking~!

    It's not a blank toolbar. In my CMS, it's one that is common to most of the forms of one branch, but not to the home page / dashboard. It has print, save, a shortcut menu and other items on it. From Saki's suggestions, I moved away from thinking to add the same toolbar to the individual pages, but instead add a single toolbar on the tab in the panel and just show or hide it, depending on whether it's the dashboard or not.

    Interestingly, it's very very similar to another issue I posted, asking help. The explorer I am using is also a single one that is reused to show a tree relevant to the tab being displayed. When the user navigates to the home page, I would like to hide the tree as well as the top toolbar.

    Resizing and recalculating sizes is really the main issue. I can do the calculation to make the window the correct size, but there is a noticeable sluggishness when switching tabs that is only attributed to my calculation.

    Regards,
    Joshua


  • Would that definitely work quicker than the previous method?

    Joshua


  • Untested idea: Add tabPanel.setSize(tabPanel.getSize()) after show/hide calls.







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about [2.0]layout when showing / hiding a toolbar in tabPanel , Please add it free.
    Posted by smith |

    Recent Posts

    Archives

    Categories

    Blog roll

    Meta