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)
As you can see all of the events will pass the "this" parameter which contains the CFWindows Ext.BasicDialog object. Here is a sample of how to set up a simple listener for the 'beforehide' event (click here to see the working sample):

<!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>

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>

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 + "\nY: " + 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 + "\nheight: " + 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 (Comment Moderation is enabled. Your comment will not appear until approved.)
Scott Bennett's Gravatar I just noticed that my "Working Samples" are not working on my new hosting provider. I probably need to find out where the /cfide/scripts directory is located so I can make my CF8 stuff work. In the mean time if you try them on your own CF8 server I assure you, they all work.
# Posted By Scott Bennett | 1/30/08 4:58 PM
Dan Vega's Gravatar I know you already know this but I thought I would share it anyways. This is more for people reading this article. You do not have to provide a function name, you can always call always use an anonymous function like so

myWindow.on("resize",function() {
   alert("window resized")
})
# Posted By Dan Vega | 1/30/08 5:27 PM
Scott Bennett's Gravatar That is true, I just do it the other way for my examples because I think that it makes it easier for people who are not necessarily JavaScript guru's to read than using that "shortcut" technique. It's kind of like in high school algebra where the teacher makes you show all your work even when you know the answer just by looking at the equation. In the resize example init function could be written like this:

<script language="JavaScript">
   init = function(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.on('resize',function(myWindow,width,height){
whMsg = ("width: " + width);
whMsg = (whMsg + "\nheight: " + height);
myWindow.body.update(whMsg);
});
}
</script>
# Posted By Scott Bennett | 1/30/08 6:10 PM
Scott Bennett's Gravatar I got my hosting provider to add the virtual directory to the CFIDE/Scripts folder so my samples actually work now.
# Posted By Scott Bennett | 1/30/08 8:02 PM
Frank Wheatley's Gravatar This is great info. I need to dig into the Ext library more.

BTW. I'm looking for a cf8 host. I have about 10 sites (all low traffic) that I need to move. Any suggestions?
# Posted By Frank Wheatley | 1/31/08 12:29 AM
Scott Bennett's Gravatar @Frank,

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.
# Posted By Scott Bennett | 1/31/08 3:03 AM
Ebenezer Anjorin's Gravatar Anyone that uses the instant messenger stuff on facebook will better understand what am about to say. I was wondering (if one would use coldfusion cfwindow) for that kind of thing, how would the window listen for new messages. assuming there is function to get message .. is there a way for the window to keeping the function itself or somthing.
# Posted By Ebenezer Anjorin | 6/3/08 3:40 PM
Scott Bennett's Gravatar You could create a function that starts an infinite loop to check the server for new messages every few seconds (or whatever interval you want). Then use the cfajaxonload() to call that function after all the cf generated ajax stuff loads. The javascript would look something like this:

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.
# Posted By Scott Bennett | 6/3/08 5:03 PM
Anjorin Ebenezer's Gravatar Thank you scott, i am bit better but i still need some help please.

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.
# Posted By Anjorin Ebenezer | 6/4/08 1:07 AM
Scott Bennett's Gravatar @Anjorin,
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.
# Posted By Scott Bennett | 6/5/08 3:35 PM
Anjorin Ebenezer's Gravatar Thank you so much scott, please an example will make it very easy for me. I appreciate your support. i really do. Thank you.
# Posted By Anjorin Ebenezer | 6/5/08 6:37 PM
ScottE's Gravatar I have a page that has two cfwindows on it. For some reason, I can not access any of the cfform elements (specifically a multiselect checkbox) in the cfwindows via "getElementById" in my javascript. I just get "Element is undefined" errors. Am I missing something or does the content of the cfwindow not get included into the pages DOM?
# Posted By ScottE | 8/24/09 4:05 PM
 
Home | Blog | Portfolio | Contact | © 2001 - 2007 The ColdFusion Guy - Scott Bennett. All rights reserved.
BlogCFC was created by Raymond Camden. This blog is running version 5.9.