IE中的窗口拖动问题

ExtJS 4

我希望将Ext.Window拖到浏览器边界之外。所以我删除了浏览器的滚动条作为

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

在萤火虫中，它工作得很好。但在IE中，每当我把窗口拖到外面时，它就会再次在浏览器窗口中被捕捉。

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

A=可见部分

B=裁剪部分

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

请告诉我为什么会发生这种事。如何更正？

编辑：

这是我正在使用的完整代码。它的行为与firefox中的情况1（这是必需的）相同，但与IE中的情况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>

如果您的窗口位于某些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();
});

您也可以将其包含在面板中。。。如果面板比浏览器的视图小，则窗口会在面板外滚动，到达浏览器边界时，其行为就像您希望的那样。

看看这个。我无法改变身体的姿势类型并使其工作。也许你可以试试。

相关内容

最新更新

热门标签：