Window dragging issue in IE

问题

ExtJS 4

I want my Ext.Window to be dragged outside the browser boundary. So I removed the scroll bars of the browser as

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

In firefox its working fine. But in IE, whenever I drag the window outside, it is again snapped within the browser window.

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

A = visible part

B = cropped part

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

Please tell me why is this happening. How to correct this?

EDITED:

This is the full code which I'm using. It behaves as case 1 (which is required) in firefox but as case 2 in IE.

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

回答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.

来源：https://stackoverflow.com/questions/12211173/window-dragging-issue-in-ie

标签

internet-explorer

extjs

window

extjs4

draggable