窗口拖动问题在IE [英] Window dragging issue in IE
问题描述
ExtJS 4
我希望我的Ext.Window被拖动到浏览器边界之外。所以我删除了浏览器的滚动条。
document.documentElement.style.overflow ='hidden'; // firefox，chrome
document.body.scroll =no; // ie only
在Firefox中它的工作正常。但是在IE中，每当我将窗口拖动到外面时，它会再次在浏览器窗口中弹出。
我想要这个）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
| |
| |
| |
| |
| |
| --window ----
| | A | B |
| ----- + ------
| |
| |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ p>
A =可见部分
B =裁剪部分
但是这是发生在IE8（案例2）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~
| |
| |
| |
| |
| |
| |
| --window-- |
| | ||
| ---------- |
| |
| |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ p>
请告诉我为什么会发生这种情况。如何纠正这一点？
EDITED：
这是完整的代码我在用着。
它在firefox中作为case 1（这是必需的），但在IE中为case 2。
< html> ;
< head>
< title> Page5（Window）< / title>
< link rel =stylesheettype =text / csshref =../ resources / css / ext-all.css>
< script type =text / javascriptsrc =../ 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容器内，视口或面板。请参阅以下代码：
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'）。
}）;
您可以在面板中包含它...如果面板小于浏览器的视图，窗口滚动到面板外面，达到浏览器边界的行为就像您想要的那样。
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>
解决方案 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.
这篇关于窗口拖动问题在IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
