View Full Version : BorderLayout - slideIn/slideOut

17 Aug 2011, 12:38 AM
Within a borderlayout panel I have a west and a center panel:

layout: 'border',
items: [ {
region: 'west',
width: 300,
title: 'West',
collapsible: true,
collapsed: true,
split: true,
region: 'center',
title: 'Center',
split: true,
collapsible: false,

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.

18 Aug 2011, 1:18 PM
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:


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


18 Aug 2011, 5:28 PM
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.


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

18 Aug 2011, 6:12 PM
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.


18 Aug 2011, 6:27 PM
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:

var borderLayout = panel.getLayout();

getTarget: function() {
return false;
}, borderLayout.regions.west);

I've just tried it myself and it works nicely.

18 Aug 2011, 6:49 PM
Oh mama I will try it first thing in the morning! Thanks and stay tunned!


18 Aug 2011, 9:06 PM
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:

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.

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

18 Aug 2011, 11:30 PM
Thanks kirtle. The

hideCollapseTool: true

config solves my problem.

19 Aug 2011, 7:42 AM
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


19 Aug 2011, 9:23 AM
@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).