IE中的窗口拖动问题答案

【问题标题】：Window dragging issue in IEIE中的窗口拖动问题
【发布时间】：2012-08-26 00:36:30
【问题描述】：

ExtJS 4

我希望将我的 Ext.Window 拖到浏览器边界之外。所以我把浏览器的滚动条去掉了

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

在 Firefox 中它工作正常。但是在 IE 中，每当我将窗口拖到外面时，它又会在浏览器窗口中捕捉到。

I want this (case 1)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                       --window----
|                       |  A |   B |
|                       -----+------
|                            |
|                            |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A = 可见部分

B = 裁剪部分

But this is happening in IE8 (case 2)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                  --window--|
|                  |        ||
|                  ----------|
|                            |
|                            |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

请告诉我为什么会这样。如何纠正这个问题？

已编辑：

这是我正在使用的完整代码。它在 firefox 中表现为 case 1（这是必需的），但在 IE 中表现为 case 2。

<html>
<head>
    <title>Page5 (Window)</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){
        document.documentElement.style.overflow = 'hidden';  // firefox, chrome
        document.body.scroll = "no"; // ie only
        Ext.create('Ext.Window', {
            title: 'Title',
            html: 'html',
            height: 300,
            width: 300
            //constrainHeader: true
        }).show();
    });
    </script>
</head>
<body background="Water lilies.jpg" ></body>
</html>

【问题讨论】：

这个例子对你有用吗？如果是这样 - 确保组件（和 css）的所有属性都相同。 docs.sencha.com/ext-js/4-0/extjs-build/examples/window/…
这在 Firefox 中运行良好（如案例 1）。我在 IE 中复制粘贴了相同的链接，然后表现得像这样（如案例 2）。
这很奇怪。我刚刚在 ie7、8 和 9 中对此进行了测试，它的工作原理与在 Fx 中相同...
我已经添加了代码（没什么特别的）。您可以尝试粘贴到系统中并检查是否能够将其拖到浏览器边界之外。或者，如果您有什么特别之处，也可以分享给我。
我已经在几台 Windows 机器上对此进行了测试，它们都具有您的问题所指定的相同行为（案例 2）。这对你来说不是本地的，不要因为别人说它对他们有用而气馁。

标签： internet-explorer extjs window extjs4 draggable

【解决方案1】：

如果您的窗口位于某个 ExtJS 容器（如 Viewport 或 Panel）内，它就可以工作。请参阅下面的代码：

Ext.onReady(function() {
    document.documentElement.style.overflow = 'hidden'; // firefox, chrome
    document.body.style.overflowX = 'hidden';
    document.body.style.overflowY = 'hidden';
    //  document.body.style.position = 'relative';
    document.body.scroll = "no"; // ie only
    Ext.create('Ext.Viewport', {
        title : 'Test Panel',
        width : 1000,
        height : 700,
        items : [ {
             id : 'mywin',
             title : 'Title',
             html : 'html',
             height : 300,
             width : 300
        } ]
    });
    Ext.getCmp('mywin').show();
});

您也可以将它包含在面板中...如果面板小于浏览器的视图，则窗口会在面板之外滚动，并且在到达浏览器边界时会按照您的意愿行事。

查看this。我无法更改身体的位置类型并使其正常工作。或许你可以试试看。

【讨论】：