Window dragging issue in IE

Question

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>

does this example work for you? If so - make sure you have all the properties of the component (and css) the same. http://docs.sencha.com/ext-js/4-0/extjs-build/examples/window/layout.html — Dziad Borowy, Sep 06 '12 at 10:40
This works fine (as in case 1) in Firefox. I copy-pasted the same link in IE, then behaved like this (as in case 2). — Shashwat, Sep 06 '12 at 10:58
That's odd. I've just tested this in ie7, 8 and 9 and it works the same as in Fx... — Dziad Borowy, Sep 06 '12 at 11:26
I've added the code (nothing special in that). You can try pasting in your system and check if you are able to drag it outside the browser boundary. Or you can share me yours if you have something special in it. — Shashwat, Sep 06 '12 at 11:42
I've tested your code in ie7,8 and it works the same as ext-demo. I can drag it outside. (i was using extjs v4.0.7). — Dziad Borowy, Sep 06 '12 at 12:14
I tried in ext4.0.2a and ext4.1.0. Please try including background image (edited in the code)in the body and then drag the window. Here the background is also moving but without scroll bars (in IE8). But in firefox, its cropping the window. — Shashwat, Sep 07 '12 at 04:50
If you want to rule out some oddities between browsers, you may consider using a [doctype](http://www.w3schools.com/tags/tag_doctype.asp). — John Krull, Oct 02 '12 at 19:27
Its not about oddities of browsers. I just want to make it work in IE8. — Shashwat, Oct 03 '12 at 05:11
I've tested this on several windows machines, and they all have the same behavior specified by your question (Case 2). This is not local to you, don't be discouraged by others saying that it works for them. — bldoron, Oct 16 '12 at 06:56
@bldoron! Ok sure. Here also it was happening the same in many systems. Anyways, I don't need it now. Thanks for raising the bounty. — Shashwat, Oct 16 '12 at 07:05
@Shashwat [How To Check (SO)](http://stackoverflow.com/questions/627097/how-to-tell-if-a-browser-is-in-quirks-mode) — A1rPun, Oct 16 '12 at 08:08
If this is working for others in IE, try putting your IE back to standard settings. What does Chrome browser do? — Wesley De Keirsmaeker, Oct 16 '12 at 05:50
I see the same behavior in IE9 as described. I've noticed that if I move it beyond the top boundary and the left boundary it does not do this. However if I move it beyond the right or bottom boundary it just scrolls the page to that location. — Wjdavis5, Oct 17 '12 at 11:46

score 1 · Answer 1 · edited Oct 17 '12 at 18:56

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.

Window dragging issue in IE

1 Answers1

Linked