In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Nathan asked the question:
"I like the center feature but if you want to move the window to a little below center what function do you call to center then move it down 20 px?"
The answer is to use the Ext.BasicDialog.center() function, then get the windows Ext.Element object using the Ext.BasicDialog.getEl() function. The Ext.Element object has the getX() and getY() methods, which will give you access to the windows X and Y coordinates. You can use those, in combination with the Ext.BasicDialog.moveTo() function, to move the window to your desired position relative to the center.
In the example below, I have created a simple JavaScript function that does that. Click here to try it out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<title>Reposition A CFWindow From Center</title>
<script language="JavaScript">
rePositionWindow = function(windowName){
//Get window object
myWindow = ColdFusion.Window.getWindowObject(windowName);
//use the centerfunction to center the window.
myWindow.center();
//get the Windows Element object
winEl = myWindow.getEl();
//move the window down 20 pixels from it's current position
myWindow.moveTo(winEl.getX(),winEl.getY()+20);
}
</script>
</head>
<body>
<!--- Button to call the function --->
<input type="button" value="reposition" onclick="rePositionWindow('MyWindow');">
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="false"
draggable="true"
height="200"
initShow="true"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title="My Window"
width="400">
Click the button to move this window to 20px below the center
</cfwindow>
</body>
</html>
<title>Reposition A CFWindow From Center</title>
<script language="JavaScript">
rePositionWindow = function(windowName){
//Get window object
myWindow = ColdFusion.Window.getWindowObject(windowName);
//use the centerfunction to center the window.
myWindow.center();
//get the Windows Element object
winEl = myWindow.getEl();
//move the window down 20 pixels from it's current position
myWindow.moveTo(winEl.getX(),winEl.getY()+20);
}
</script>
</head>
<body>
<!--- Button to call the function --->
<input type="button" value="reposition" onclick="rePositionWindow('MyWindow');">
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="false"
draggable="true"
height="200"
initShow="true"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title="My Window"
width="400">
Click the button to move this window to 20px below the center
</cfwindow>
</body>
</html>
There are no comments for this entry.
[Add Comment]