1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Germany, Frankfurt
    Posts
    142
    Answers
    1
    Vote Rating
    1
    enpasos is on a distinguished road

      0  

    Default Answered: BorderLayout - slideIn/slideOut

    Answered: BorderLayout - slideIn/slideOut


    Within a borderlayout panel I have a west and a center panel:

    PHP Code:
        ...
        
    layout'border',
        
    items: [ {
            
    region'west',
            
    width300,
            
    title'West',
            
    collapsibletrue,
            
    collapsedtrue,
            
    splittrue,
            ...       
        },{
            
    region'center',
            
    title'Center',
            
    splittrue,
            
    collapsiblefalse,
            ...
        } 
    It "works" by showing two behaviours:
    • slideIn/slideOut: By clicking the left bar the west region slides in over the center region. By clicking again is slides back.
    • collapse/expand: By clicking a tool icon (>>) the collapsed west region expands by pushing the center region to the right. Collapse works similar.

    I would only like to have the "slideIn/slideOut" effect but not the "collapse/expand" (and no (>>) icons). How to?
    I use ExtJS 4.0.5.

  2. Is what you want the same as in this thread? The problem is described a little differently but I think it may be the same.

    http://www.sencha.com/forum/showthread.php?143610

    I think hideCollapseTool: true should give you what you want.

  3. #2
    Ext JS Premium Member makiss's Avatar
    Join Date
    Jun 2008
    Location
    NYC
    Posts
    27
    Vote Rating
    0
    makiss is on a distinguished road

      0  

    Default


    Same issue wasted all of today on what seems like a pretty basic use case...

    From what I searched (3.x versions) the below should work for 4.05:

    myPanel.ownerCt.layout.regions.east.slideIn('r')

    nada... no function slideIn on region... tried most of the containers and bodys etc now will see if displayMode has something to do with it... this is gonna be an expensive feature...

    Bump.... got this posted on premium forums as well so lets hope someone gets back soon


  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Is what you want the same as in this thread? The problem is described a little differently but I think it may be the same.

    http://www.sencha.com/forum/showthread.php?143610

    I think hideCollapseTool: true should give you what you want.

  5. #4
    Ext JS Premium Member makiss's Avatar
    Join Date
    Jun 2008
    Location
    NYC
    Posts
    27
    Vote Rating
    0
    makiss is on a distinguished road

      0  

    Default


    thanks skirtle thought about that but definitely need a border layout. To behave exactly as one - with the option to slideOut a region programatically. Found a few posts for 3.x on doing it by just calling the region.slideOut(). but the regions have been reorganized in 4 so that might be affecting it.

    I just don't know what to slideOut: not body, not el, not the panel. Those work but only if the panel is visible and in not desired ways..

    Man what if life were so easy that it just knew - if its a region and you say panel.slideOut().. it just worked...

    If I can get a handle on it Ill override it then request a feature.


  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I think you misunderstood me. In the thread I suggested there is a post from me. In it I explain how to hide the >> tool or, alternatively, how to make it perform slide in/slide out instead of expand/collapse

    Further to what I said on that thread, I think you can slide in/slide out programmatically like this:

    Code:
    var borderLayout = panel.getLayout();
    
    borderLayout.floatCollapsedPanel({
        getTarget: function() {
            return false;
        }
    }, borderLayout.regions.west);
    I've just tried it myself and it works nicely.

  7. #6
    Ext JS Premium Member makiss's Avatar
    Join Date
    Jun 2008
    Location
    NYC
    Posts
    27
    Vote Rating
    0
    makiss is on a distinguished road

      0  

    Default


    Oh mama I will try it first thing in the morning! Thanks and stay tunned!

    Cheers!

  8. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Answers
    8
    Vote Rating
    -1
    raz0r1 is an unknown quantity at this point

      0  

    Default


    Where did you put that? I tried it in "beforerender" of the panel, that is collapsed/expanded but it does not work. I get the following error in firebug:
    Code:
    borderLayout.regions is undefined
    any idea? it would help me very much, too.

    btw this is exactly what I wanted, only with a shown toogle-icon.

    thanks in advice.

    Edit:
    The problem with your solution seems to be that the regions are set later. they does not exist at "beforerender" neither in the parent viewport nor in the panel itself.
    If you could help it would be nice

  9. #8
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Germany, Frankfurt
    Posts
    142
    Answers
    1
    Vote Rating
    1
    enpasos is on a distinguished road

      0  

    Default


    Thanks kirtle. The

    hideCollapseTool: true

    config solves my problem.

  10. #9
    Ext JS Premium Member makiss's Avatar
    Join Date
    Jun 2008
    Location
    NYC
    Posts
    27
    Vote Rating
    0
    makiss is on a distinguished road

      0  

    Default


    Woot! Thanks mate worked like a charm!

    floatParent eh? hmmm lesson learned. You would think after 4 years of Ext I would know it inside out but the issues always arise when you try to do something out-of-the-box.

    Again many thanks


  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @raz0r1: The code I posted in this thread is for sliding programmatically. In that context it doesn't make sense to put it in beforerender, you'd put it wherever you need the transition to occur.

    I'll answer your other questions back on your original thread (link given previously for anyone else looking for it).

Thread Participants: 3