相对于约束容器的中心和顶部定位一个受约束的窗口答案

【问题标题】：Position a constrained Window relative from the center and top of the constraining container相对于约束容器的中心和顶部定位一个受约束的窗口
【发布时间】：2013-11-19 14:47:33
【问题描述】：

我们需要相对于容器的顶部和中心来定位一个受约束的窗口（如example）。但在配置中，我们只发现 x 和 y 需要计算每个文档更改的中心。

没有其他方法可以存档吗？

【问题讨论】：

标签： extjs extjs4 extjs4.2

【解决方案1】：

你可以使用

alignTo() docs

alignTo(element, [position], [offsets], [animate] )

将元素与相对于指定元素的另一个元素对齐锚点。如果另一个元素是它对齐的文档视口。 position参数是可选的，可以指定采用以下任一格式：

Blank：默认对齐元素的左上角目标的左下角（“tl-bl”）。一个锚（已弃用）：传递的锚点位置用作目标元素的锚点。被对齐的元素会将其左上角 (tl) 定位到那一点。此方法已被弃用，取而代之的是较新的两个下面的锚语法。两个锚点：如果下表中的两个值以破折号分隔传递，第一个值用作元素的锚点，第二个值作为目标的锚点。除了锚点，位置参数还支持“？”特点。如果 ”？”在结束时通过位置字符串，元素将尝试按指定对齐，但是位置将被调整以限制到视口，如果必要的。请注意，正在对齐的元素可能会交换为对齐到与指定位置不同的位置以强制执行视口约束。以下是所有支持的锚点职位...有关更多信息，请参阅docs

或

anchorTo() docs

anchorTo(element, [position], [offsets], [animate], [monitorScroll], [callback])

将一个元素锚定到另一个元素，并在调整窗口大小时重新对齐。

编辑

如果您在早期执行此操作，则定位可能会失败。我会尝试使用Ext.Function.createDelayed 为对齐添加延迟。尝试 10-50 之间的延迟。

例子：

Ext.Function.createDelayed(windowRef.anchorTo,50)(Ext.getBody(),'t-t',[-100,0]);

【讨论】：

感谢您的回复，我们会试一试的。
这不起作用。我们在您在链接问题中向我们推荐的 afterFirstLayout 方法中尝试了 alignTo(contrainingRef,'t-t',[-100,0])、alignTo(Ext.getBody(),'t-t',[-100,0])、anchorTo(contrainingRef,'t-t',[-100,0]) 和 anchorTo(Ext.getBody(),'t-t',[-100,0])。我们在 setVisible() 之前和之后尝试过。他们都没有改变窗口的对齐方式。
@JJR 查看我的编辑。我猜你需要延迟，以便布局有时间完成计算（只是猜测）。
固定时间延迟非常脆弱。您是否尝试过在要放置窗口的容器的布局后事件侦听器中进行定位？
@MacyAbbey 是的，我在容器的 afterFirstLayout 方法中执行此操作（因为我希望它只运行一次）。但这没有用。根据建议的延迟，它起作用了。

【解决方案2】：

我认为 Ext.window.Window 的 showBy 方法提供了最简单的方法，因为它不需要在应用之前渲染窗口等。使用应用程序主体作为父容器的解决方案如下所示：

let appBody = Ext.getBody();
Ext.create({
    xtype: 'window'
}).showBy(appBody, 't-t', [-100, 0])

有关 showBy 方法的更多信息，请参阅 Ext 文档（这里是 Ext 4 和 6 的链接）

【讨论】：