访问边框布局的不同区域

Posted 2023-02-26

【中文标题】访问边框布局的不同区域

【英文标题】：Accessing the different regions of a border layout

【发布时间】：2012-09-22 19:52:25

【问题描述】：

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

有没有更好的办法？

【参考方案1】：

通常，我为必须使用的每个容器设置一个 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);

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

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

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

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

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

【讨论】：

10 倍的答案。一些评论： 1.这是Extjs4.1，我想尽可能避免Ext.getCmp()。我改用查询。 2. 使用 items[i] 听起来很危险。因为您依赖于项目顺序。从来都不是好事。 3. 刚试了一下。 items 不起作用。您需要使用viewPort.items.items[0]，如果您的西部地区位居第二，它将显示在items[2] 而不是items[1]，因为边框布局会自动添加拆分器。

我会接受你的答案，主要是因为你使用了[region=center]，但这对我来说仍然不是正确的答案。还是 10 倍。

谢谢，如果您找到更好的选择器，请告诉我 ;) Cyaz！