The CFWindow tag is built using the Ext.BasicDialog object. This object has several public events that you can add listeners to. You can use the Ext.BasicDialog objects on() function to add listeners to these events that will fire a specific function when the specified event occurs. You can program the listener functions to react as necessary to the various events. Here is a list of the events that you can set up listeners for:
-
beforehide - Fires before this window is hidden. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
-
beforeshow - Fires before this window is shown. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
-
hide - Fires when this window is hidden. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
-
keydown - Fires when a key is pressed. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
- e - Ext.EventObject (this will tell you which key was pressed)
-
move - Fires when this window is moved by the user. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
- x - number (The new X coordinate of the CFWindow)
- y - number (The new Y coordinate of the CFWindow)
-
resize - Fires when this window is resized by the user. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
- width - number (The new width of the CFWindow)
- height - number (The new height of the CFWindow)
-
show - Fires when this window is shown. The listener function will be called with the following parameters:
- this - Ext.BasicDialog (the CFWindow javascript object)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
//Add a listener to the "beforehide" event
myWindow.on('beforehide',centerWindow);
}
centerWindow = function(myWindow){
//Center the window
myWindow.center();
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a cfWindow with a listener"
width="400">
If you move this window then close it, it will be centered before it closes. So when you open it again, it will be in the center.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading to create the listener --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
//Add a listener to the "beforehide" event
myWindow.on('beforehide',centerWindow);
}
centerWindow = function(myWindow){
//Center the window
myWindow.center();
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a cfWindow with a listener"
width="400">
If you move this window then close it, it will be centered before it closes. So when you open it again, it will be in the center.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading to create the listener --->
<cfset ajaxonload("init")>
</body>
</html>
You could use the same code above to add listeners for the "beforeshow", "hide", "keydown", "move", "resize", and/or "show" events depending on when you want the centerWindow function to execute.
There are a few events that have additional parameters than will be sent to the function. Here is a simple exmple of a listener to the "keydown" event:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('keydown',showKey);
}
showKey = function(myWindow,e){
ife.getCharCode());
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a listener"
width="400">
If you click on this window and press a key this window will tell you the char code for the key was pressed.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('keydown',showKey);
}
showKey = function(myWindow,e){
ife.getCharCode());
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a listener"
width="400">
If you click on this window and press a key this window will tell you the char code for the key was pressed.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
Here is an example of a "move" event listner:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('move',moveListener);
}
moveListener = function(myWindow,x,y){
xyMsg = ("X: " + x);
xyMsg = (xyMsg + "
Y: " + y);
myWindow.body.update(xyMsg);
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a move listener"
width="400">
Move this window and it will tell you it's X/Y coordinates.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('move',moveListener);
}
moveListener = function(myWindow,x,y){
xyMsg = ("X: " + x);
xyMsg = (xyMsg + "
Y: " + y);
myWindow.body.update(xyMsg);
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a move listener"
width="400">
Move this window and it will tell you it's X/Y coordinates.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
Here is an example of a "resize" event listner:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('resize',resizeListener);
}
resizeListener = function(myWindow,width,height){
whMsg = ("width: " + width);
whMsg = (whMsg + "
height: " + height);
myWindow.body.update(whMsg);
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a resize listener"
width="400">
Resize this window and it will tell you it's new height and width.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('resize',resizeListener);
}
resizeListener = function(myWindow,width,height){
whMsg = ("width: " + width);
whMsg = (whMsg + "
height: " + height);
myWindow.body.update(whMsg);
}
</script>
</head>
<body>
<!--- set up the window. --->
<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
refreshOnShow = "false"
resizable="true"
title="a Window with a resize listener"
width="400">
Resize this window and it will tell you it's new height and width.
</cfwindow>
<a href="#" onclick="javascript:ColdFusion.Window.show('MyWindow')">Click here to Open Window</a>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
Comments (12) |
11988 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
myWindow.on("resize",function() {
alert("window resized")
})
<script language="JavaScript">
init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('resize',function(myWindow,width,height){
whMsg = ("width: " + width);
whMsg = (whMsg + "
height: " + height);
myWindow.body.update(whMsg);
});
}
</script>
BTW. I'm looking for a cf8 host. I have about 10 sites (all low traffic) that I need to move. Any suggestions?
I was on GoDaddy for several years without any problems, but when CF8 came out, they showed no intention of upgrading. So I left them and went with another hosting company that had CF8 for only $5/month. Unfortunately, I ended up having a lot of problems because the server I was on was over loaded with websites and kept running out of memory. My traffic has been increasing a little bit since I started blogging, and I didn't want my site going down several times a day anymore, so a couple days ago I swithched to hostmysite.com. They have been great so far. I had a little problem with my /cfide/ directory not being mapped but when I brought it to their attention they fixed within an hour.
They cost a little more than $5, but when it comes to web hosting, you get what you pay for. With all the hosting providers out there, it's probably a pretty competitive market, so the guys that are selling you dirt cheap hosting are probably cutting the cost somehow, usually by overloading their servers.
infLoop=function(){
checkMessages();
window.setTimeout(infLoop,3000);
};
Then you checkMessages() function would actually do an ajax call to the server and add any new messages to the cfwindow, and show the cfwindow if it is not already visible.
my getMessage function is a coldfusion function (not a javascript function), how can i update the content of the cfwindow from the function. and since my cfwindow will be loading content from
another html page, it means the infloop() and the getMessage function that gets and formats the messages will be on that page. Please if am right, how can i update the content of the cfwindow
@ runtime.
There are a couple options I can think of off the top of my head. The first would be to use CFAjaxProxy to create a javascript proxy object so you can call the CFC function and then replace the contents of your cfwindow with the results of the CFC. The second would be to use ColdFusion.navigate() in your infinite loop to just have your cfwindow to keep refreshing the content from a .cfm page every few seconds.
Let me know if you need some examples on how to use CFAjaxProxy or ColdFusion.navigate.