1

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

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

  1. 随着东/西区域的展开/折叠，Windows 不会重新定位。例如，对于 200px 宽的西部区域，如果西部区域折叠并且窗口位于距离中心区域西边缘 150px 的位置，则西部区域被扩展，中心区域的西边缘将移动 200px，但窗口将保持原位，与扩展的西部区域重叠。如果进行任何移动窗口的尝试，由于其constrainHeader: true设置，它将迅速回到中心区域的西边缘，但它应该在展开/折叠时重新定位。

  2. Z-Index 管理：窗口仅受其标题的约束，因此可以将窗口的主体拖到中心区域的南边缘下方。理想情况下，以这种方式定位时，它应该出现在南部区域下方，但出现在上方。同样，如果东部或西部区域是浮动的（未展开），它们也应该出现在任何位置足够接近以重叠的窗口上方。看起来虽然窗口是作为中心区域的子元素添加的，但它们实际上并不是中心区域元素的 DOM 子元素，因此它们的 z 索引与中心区域无关，而是与页面主体相关。因此，即使使用带有自定义 zseed 的自定义 ZIndexManager，也无法保证所有打开窗口的 z-index 都低于其他区域的 z-index。

  3. 当一个窗口展开并恢复到其原始大小时，它的原始位置向右移动一个等于西部区域可见宽度的量 - 如果该区域折叠，则移动量很小，因为只有标题是可见的，否则是全宽。

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

  1. Ext.AbstractComponent 文档声明在将组件添加为某个容器的子组件时不要使用 renderTo，因为容器布局管理器应该处理它。这与浮动组件有关吗？

  2. 与上述 3) 类似的问题 - 窗口最大化和恢复就好了，但是在拖放窗口时会发生类似的向东迁移，并且更加明显。每当您放下一个窗口时，它都会定位在它被放下的地方的右侧，该数量等于（或接近）西部区域的可见宽度。当西部地区扩大时，这尤其令人不安。

所有这些问题（除了 maximise-restore 问题）都可以在这个简单的应用程序中看到：

<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 问题，并且在最大化/恢复时窗口不会错误地定位自己。好消息！然而，窗口在拖放时仍然不能正确定位自己，这很容易成为最明显和最烦人的问题。关于为什么会发生这种情况以及如何阻止它的任何想法（当它被丢弃时，没有手动从 windows x 位置减去西部区域的宽度）？

4

0 回答 0