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>
Fix for Windows Dragging Lag (applies to Windows 10 too) Tip I finally found the fix! This problem is not new at all and in my case it was even on Windows 10, but on Windows 11 it was much more visible when opening explorer from taskbar. It is much more hardware related and dependent on type of motherboard and/or just conicidence.
* Issues: Has address bar and windows resize a bit smaller than in IE11 - We open index.html in Edge without IE mode, from a shortcut with the option -app ("C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -app=http://localhost :8080/index.html), * window.resizeTo works correctly, the window is resized
- We open index.html in Edge without IE mode, from a shortcut with the option -app ("C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -app=http://localhost :8080/index.html), * window.resizeTo works correctly, the window is resized * It does not have an address bar, correct. * Issues: IE specific javascript code doesn't work
Hi, We currently have a website that is working in production environments correctly in IE11. The url is added in the browser's trusted sites and in the Microsoft Tech Community Home
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With