9

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>
4

1 回答 1

1

It works if your window is inside some ExtJS container like Viewport or Panel. See code below : 

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();
});

You can contain it in a Panel also... if the panel is smaller than the browser's view, the window scrolls outside the panel and on reaching the browser boundaries behaves like you want it to.

Check out this. I was not able to change the body's position type and get this working. May be you can try it out.

于 2012-10-16T11:54:10.370 回答