PDA

View Full Version : [CLOSED-687] Ext.Window Position Error with Buttons and Right Alignment



mlavender
5 Mar 2010, 10:42 AM
Running Ext 3.1.0 I have a very simple test case that's resulting in a significant display error in IE8. It displays properly in FF 3.5. We have code that has worked for more than a year, but we recently upgraded to Ext 3.1 and now when we display an Ext.Window that does not have specified width it's displaying very strangely.

Basically, the window displays with a left position of -5000 (presumably hiding offset) and the right edge on the right-hand side of the screen, so the contents are scrolled way off the screen to the left. This appears to be due to the default buttonAlign setting of 'right', as if I change the buttonAlign to 'left' or 'center' the problem goes away and the window displays as desired.

My test case is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Scripts/ext/ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="Scripts/ext/ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Scripts/ext/ext-3.1.0/ext-all-debug.js"></script>
</head>
<body>

<script language="javascript">
var newWindow = new Ext.Window({
//buttonAlign: 'left',
buttons: [{ text: 'Close', handler: function() { newWindow.destroy(); } }]
}).show();
</script>
</body>
</html>
If I don't have any buttons on the dialog, or if I set the buttonAlign to anything other than 'right' (the default) it displays properly. In my implementation, I'm actually using the contentEl property to load the Window contents, and have it auto-size, which works great as long as I don't put the buttons on the right.

I don't see that there's anything obviously wrong about what I'm doing, as it looks like a pretty simple cases, and actually matches some of the code examples in the API documentation.

Any assistance would be greatly appreciated!

evant
5 Mar 2010, 4:33 PM
You need to wrap your code inside an onReady block.

evant
5 Mar 2010, 4:48 PM
Also, your window has no initial dimensions. In IE, when doing this with an absolute positioned element isn't going to end well.

Give the window some initial dimensions and then do your sizing after.

mlavender
9 Mar 2010, 7:34 AM
This isn't a lifecycle issue, as the same display problem happens if I tie the display to the onclick for a button:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Scripts/ext/ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="Scripts/ext/ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Scripts/ext/ext-3.1.0/ext-all-debug.js"></script>

<script language="javascript">
function showWindow() {
var newWindow = new Ext.Window({
//buttonAlign: 'left',
contentEl: 'testContent',
autoShow: true,
buttons: [{ text: 'Close', handler: function() { newWindow.destroy(); } }]
});
newWindow.show();
}
</script>
</head>
<body>
<div id='testContent' class='x-hidden'>This is the content that I want to show.</div>
<input type="button" value="Show Window" onclick='showWindow();' />
</body>
</html>
I see where you're coming from in terms of saying the window should have an initial size, but in my case I want it to size to the content, not to a fixed size. We have been using the contentEl property and loading contentEl from an URL using AJAX. Since the content element is a DIV, if the window is given an initial size, the DIV will just size its width to fill the window, so I can't use the size of the element to resize the window after that point.

It was working just fine before we upgraded to Ext 3.1 (from 2.x), and would size to the content properly. It also still works correctly (as desired) in FF.

I really feel like this is a problem with the Window class because it works exactly as I would want (and as it used to in earlier versions of Ext) if I set the buttonAlign to 'left' or 'center'. It's only with the default buttonAlign of 'right' that it's a problem. That seems like a bug in the Window class. Try out my code and uncomment the line for buttonAlign and you'll see the behavior as it should be versus when that line is commented.