PDA

View Full Version : Window width problems in IE7



raskri
11 Aug 2010, 2:43 AM
Im trying to render a simple window in IE7 but it just expands out of the browsers view.

Im using Ext JS 3.2.1.

Paste this in any file under examples.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">

Ext.onReady(function() {

var s = new Ext.Window({
title: "Window Test in IE7",
items: {
height: 300,
width: 300,
html: 'TEST'
}
});
s.show();

})
</script>
</head>
<body>
</body>
</html>Any thoughts?~o)

Condor
11 Aug 2010, 3:14 AM
A Window is a floating object (position:absolute), so it needs a fixed height and width.

Move the height and width from the inner panel to the window itself.

ps. Why are you even using a panel? Window has a 'html' config option too!

raskri
11 Aug 2010, 3:28 AM
A Window is a floating object (position:absolute), so it needs a fixed height and width.

Move the height and width from the inner panel to the window itself.

ps. Why are you even using a panel? Window has a 'html' config option too!

It might be a bad example, but in my case there is more content inside the window(an example: formPanel with fields), which hopefully should decide the size of the window. It works in chrome, firefox and IE8. But not IE7.

So what I'm asking is: Is it possible to have an Ext.Window in IE7 which dynamically expands the width to fit the content, like in chrome, firefox and IE8?

Condor
11 Aug 2010, 3:42 AM
So you not only want dynamic height, but also dynamic width?

You can only do that if you make sure the components inside actually have a width and are not autosized by the browser (remember that a window is intially created at -10000px,-10000px, so if you let IE7 decide how wide a standard element should be, it would end up with 10000px + screen width.

And this is not only true for the components you add to the window, but also for the elements that make up the window itself (e.g. the tools are float:right, which would also break autowidth).

All in all, it's simply not practical to want a window that is autoWidth:true.

raskri
11 Aug 2010, 3:57 AM
...and it only applies for ie7?

I will run this if IE7:

firstPanelInsideWindow.on('afterrender', function(){
var win = this.findParentBy(function(parent){
return parent instanceof Ext.Window;
});
if(win){
win.setWidth(firstPanelInsideWindow.width + win.getFrameWidth());
}
});BTW: Thanks for your fast reply :)