ExtJS 4：容器内的窗口
我有一个应用程序，可以在视口的中心区域（具有边框布局）打开窗口，该视口也有东、西和南区域。据我所知，有两种方法可以打开这些窗口，并且都有警告。
第一种是使用 .add() 将窗口组件添加到其容器（中心区域）。此方法存在以下问题：
随着东/西区域展开/折叠，窗口不会重新定位。例如，对于西边区域 200px 宽，如果西边区域折叠并且窗口位于距离中心区域西边 150px 的位置，则西边区域展开，中心区域西边将移动 200px，但是窗口将保持在原位，与扩大的西部区域重叠。如果尝试移动窗口，由于其
constrainHeader: true设置，它将快速回到中心区域的西边缘，但它应该在展开/折叠时重新定位。 p>Z-Index 管理：窗口仅受其标题的约束，因此窗口的主体可以拖动到中心区域南边缘的下方。理想情况下，当以这种方式定位时，它应该出现在南部区域的下方，但它却出现在上方。同样，如果东部或西部区域是浮动的（未展开），它们也应该出现在任何位置足够近以重叠的窗口之上。看起来虽然窗口被添加为中心区域的子元素，但它们实际上并不是中心区域元素的 DOM 子元素，因此它们的 z 索引不是相对于中心区域而是相对于页面主体。因此，即使使用带有自定义 zseed 的自定义 ZIndexManager，也无法保证所有打开窗口的 z-index 将保持低于其他区域的 z-index。
当窗口展开并恢复到其原始大小时，其原始位置向右移动等于西部区域可见宽度的量 - 如果该区域折叠，则移动量较小，因为只有标题是可见的，否则是整个宽度。
打开窗口的第二种方法是使用 renderTo 配置选项，并将中心区域的元素作为其值。这解决了上面的问题 1) 和 2) - 当东/西区域展开/折叠时，窗口会正确地重新定位，并且由于窗口的元素是中心区域元素的实际 DOM 子元素（因此它们的 z 索引相对于中心区域），z-index 管理问题不再是问题。但是：
Ext.AbstractComponent 文档声明在将组件添加为某个容器的子组件时不要使用 renderTo，因为容器布局管理器应该处理它。这与浮动组件相关吗？
与上面的 3) 类似的问题 - 窗口最大化和恢复都很好，但是在拖放窗口时会发生类似的东移，并且更加明显。每当您放下窗口时，它都会位于其放下位置右侧一定的位置，该数量等于（或接近）西部区域的可见宽度。当向西区域扩展时，这尤其不和谐。
所有这些问题（除了最大化恢复问题）都可以在这个简单的应用程序中看到：
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-4.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
collapsed: true,
html: 'West Region'
}, {
region: 'center'
}, {
region: 'east',
width: 200,
collapsible: true,
collapsed: true,
html: 'East Region'
}, {
region: 'south',
height: 50,
html: 'South Region'
}]
});
var win = Ext.create('Ext.window.Window', {
//renderTo: viewport.layout.regions.center.getEl(), // using renderTo
width: 400,
height: 300,
title: 'Test',
constrainHeader: true
});
viewport.layout.regions.center.add(win); // using add()
win.show()
});
</script>
</head>
<body>
</body>
</html>
这些方法中的任何一种是否比另一种更有优势，并且可以适应它来克服所有列出的问题吗？
更新：
我之前可能应该想到的是同时使用两种方法。这样做意味着当东/西区域展开/折叠时，窗口可以正确地重新定位，不存在 z-index 问题，并且窗口在最大化/恢复时不会错误地定位自己。好消息！然而，拖放时窗口仍然无法正确定位自己，这很容易成为最明显和最烦人的问题。关于为什么会发生这种情况以及如何阻止它的任何想法（除了在窗口掉落时从窗口 x 位置手动减去西部区域的宽度之外）？
I have an application that opens windows in the centre region of a viewport (with a border layout) that also has east, west and south regions. As far as I can tell there are two ways to open these windows and both have caveats.
The first is to use .add() to add the window component to its container (the centre region). This method suffers from the following problems:
Windows are not repositioned as the east/west regions are expanded/collapsed. For example, with a west region 200px wide, if the west region is collapsed and a window positioned 150px from the west edge of the centre region, then the west region is expanded, the west edge of the centre region will move by 200px, but the window will stay in place, overlapping the expanded west region. If any attempt to move the window is made, it will snap back to the west edge of the centre region due to its
constrainHeader: truesetting, but it should be repositioning on the expand/collapse.Z-Index Management: The window is only constrained by its header, so the body of the window is able to be dragged below the south edge of the centre region. Ideally, when positioned in such a manner, it should appear below the south region, but it appears above. Likewise, if the east or west regions are floated (not expanded), they should also appear above any windows positioned close enough to overlap. It would appear that although the windows are added as children of the centre region, they are not actually DOM children of the centre region's element, thus their z-indices are not relative to the centre region but to the page body. So even using a custom ZIndexManager with a custom zseed, it is not possible to guarantee that the z-index of all open windows will remain below that of the other regions.
When a window is expanded and restored back to its original size, its original position is shifted to the right by an amount equal to the visible width of the west region - a small amount if the region is collapsed, as only the header is visible, otherwise the full width.
The second way to open windows is using the renderTo config option, with the centre region's element as its value. This solves problems 1) and 2) above - windows are correctly repositioned when the east/west regions are expanded/collapsed and, due to the window's elements being actual DOM children of the centre region's element (and thus their z-indices are relative to the centre region), the z-index management issues are no longer issues. However:
The Ext.AbstractComponent documentation states not to use renderTo when adding the component as a child component of some container, as the containers layout manager should handle it. Is this relevant for floated components?
A similar issue to 3) above - windows maximise and restore just fine, but a similar eastward migration happens when dragging-and-dropping the window, and it is a lot more obvious. Whenever you drop a window, it is positioned some amount to the right of where it was dropped, with the amount being equal (or close to) the visible width of the west region. When the west region is expanded, this is particularly jarring.
All of these issues (except the maximise-restore one) can be seen in this simple application:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-4.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
collapsed: true,
html: 'West Region'
}, {
region: 'center'
}, {
region: 'east',
width: 200,
collapsible: true,
collapsed: true,
html: 'East Region'
}, {
region: 'south',
height: 50,
html: 'South Region'
}]
});
var win = Ext.create('Ext.window.Window', {
//renderTo: viewport.layout.regions.center.getEl(), // using renderTo
width: 400,
height: 300,
title: 'Test',
constrainHeader: true
});
viewport.layout.regions.center.add(win); // using add()
win.show()
});
</script>
</head>
<body>
</body>
</html>
Does either one of these approaches have an advantage over the other, and can it be adapted to overcome all listed issues?
UPDATE:
Something that probably should have occurred to me earlier is to use both methods together. Doing so means windows are correctly repositioned when the east/west regions are expanded/collapsed, there are no z-index issues and windows don't position themselves incorrectly when maximising/restoring. Good news! HOWEVER, windows still don't position themselves correctly when dragging and dropping, and this is easily the most obvious and annoying issue. Any ideas on why this is happening and how to stop it (short of manually subtracting the width of the west region from the windows x position when it is dropped)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论