3

在 Sencha 的边界布局 API 中,它说:

ExtJS 4.0+ 中没有 BorderLayout.Region 类

我在各种博客上找到的访问中心面板是这样的:

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

再次查看文档,我看到这centerRegion是一个私有函数(为什么?),我不想依赖这些函数来进行未来的验证。此外,没有westRegion,northRegion等...

如何获得这些物品?
我当然可以获得区域内的项目:各种面板等,但我希望完全控制包含我的边框布局的视口。这就是我现在正在做的事情:

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

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

有没有更好的办法?

4

1 回答 1

2

通常,我为必须使用的每个容器设置一个 id。因此,我的中心区域将有一个 id,我将使用Ext.getCmp()函数获取它。

否则,要访问视口项目,您可以执行以下操作:

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

如果您将中心区域定义为视口的第一项,那么上面的代码就可以了,但是如果您将其定义为第三或第四项,那么您必须根据您的区域的位置(视口.items[3] 或 viewPort.items[4] 等)。

另一种方法是使用查询选择器:

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

但是,按照这种方式,您必须查询精确的 xtype(在本例中为面板)。

无论如何,我认为最好的方法是为每个区域使用一个 id。

于 2012-09-23T12:11:43.270 回答