Accessing the different regions of a border layout

Question

In Sencha's API for border layout it says:

There is no BorderLayout.Region class in ExtJS 4.0+

What I found on various blogs, for accessing the center panel was this:

var viewPort = Ext.ComponentQuery.query('viewport')[0];
var centerR = viewPort.layout.centerRegion;

Again to the docs, I see that centerRegion is a private function (why?), and I don't care to rely on those, for future proofing. Also, there is no westRegion, northRegion, etc...

How does one get to these items?
I could of course get the items inside the regions: The various panels, and such, but I want complete control of the viewport that holds my border layout. This is what I'm doing now:

    var viewPort = Ext.ComponentQuery.query('viewport')[0];
    var view = Ext.widget('my-new-tab-panel');

    viewPort.layout.centerRegion.removeAll();
    viewPort.layout.centerRegion.add(view);

Is there a better way?

Answer 1

Usually, I setup an id for each container I have to work with. So, my center region will have an id and I'll get it with Ext.getCmp() function.

Otherwise, to access to the viewport items you can do as follows:

var viewPort = Ext.ComponentQuery.query('viewport')[0];
var view = Ext.widget('my-new-tab-panel');

viewPort.items.items[0].removeAll();
viewPort.items.items[0].add(view);

If you've defined center region as the first item of viewport, then the above code it's ok but if you've defined it as the third or the fourth, then you have to change the index according to the position of your region (viewPort.items[3] or viewPort.items[4], etc).

Another way is to use query selector:

var cr = viewPort.down('panel[region=center]');
cr.removeAll();
cr.add(view);

However, following this way, you have to query on a precisely xtype (as panel in this case).

Anyway, I think the best way is to use an id for each region.