Question

我有一个应用程序可以在视口的中心区域（带有边框布局）打开窗口，该视口也有东，西和南区域。据我所知，有两种方法可以打开这些窗口并且都有警告。

第一种方法是使用.add()将窗口组件添加到其容器（中心区域）。该方法存在以下问题：

Windows未重新定位，因为东/西区域已展开/折叠。例如，西区域宽200px，如果西区域折叠并且窗口位于距中心区域西边缘150px处，则西区域扩展，中心区域的西边缘将移动200px，但是窗户将保持原位，与扩大的西部区域重叠。如果有任何移动窗口的尝试，由于其constrainHeader: true设置，它会快速回到中心区域的西边缘，但它应该在展开/折叠时重新定位。
Z-Index Management：窗口仅受其标题约束，因此窗口的主体可以拖动到中心区域的南边缘下方。理想情况下，当以这种方式定位时，它应该出现在下面南部区域，但它出现在上面。同样，如果东部或西部地区浮动（未扩展），它们也应出现在任何靠近足以重叠的窗户上方。看起来虽然窗口被添加为中心区域的子节点，但它们实际上不是中心区域元素的DOM子节点，因此它们的z索引不是相对于中心区域而是相对于页面主体。因此，即使使用带有自定义zseed的自定义ZIndexManager，也无法保证所有打开窗口的z-index将保持低于其他区域的z-index。
当窗口展开并恢复到原始大小时，其原始位置向右移动的数量等于西部区域的可见宽度 - 如果区域折叠，则为少量，如只有标题可见，否则为全宽。

打开窗口的第二种方法是使用renderTo配置选项，中心区域的元素作为其值。这解决了上面的问题1）和2） - 当东/西区域被展开/折叠时窗口被正确地重新定位，并且由于窗口的元素是中心区域元素的实际DOM子元素（因此它们的z-索引是相对于中心区域），z指数管理问题不再是问题。但是：

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位置减去西部区域的宽度）？

ExtJS 4：容器中的Windows

0 个答案: