Ext JS Border layout: how to collapse a region programmatically?

I have a panel with "border" layout, having "center" and "north" region. I want to programmatically collapse the north region, and according to the forum the way to do that is:

container.layout.north.collapse();

Ho开发者_运维百科wever, container.layout is a string object thus container.layout.north giving me null object.

Does anyone have a 2 seconds pointer on how to get a handle to the correct layout object to call collapse() upon?

The cheapest way would be to get hold of the panel you need by calling Ext.getCmp(). For you the container.layout is undefined because it not an object of Ext.Component. Set an Id for you border panel or any panel you need access to.

 var panel = Ext.getCmp('BorderPanelId');
 panel.layout.north.collapse();

Another way would be to use the north panel's Id. In that case you will:

 var panel = Ext.getCmp('NorthPanelId');
 panel.collapse();

Another way would be to make user of the ref system. Set the ref property for your panels. And if you have access to component's owner.. you can simple use the ref to reference the panel or other components.

In Extjs 4 you can do:

panel.getLayout().regions.north.collapse();

Then to reactivate the region:

panel.getLayout().regions.north.expand();

Using Ext JS 4 you can do:

container.down('[region=north]').collapse(); 

That's the easiest and recommended way.