CFWindow Event Listeners

ballscauliflowerSoftware and s/w Development

Jun 30, 2012 (5 years and 1 month ago)

518 views

CFWindow Event Listeners
Posted At : January 30, 2008 3:47 PM | Posted By : Scott Bennett
Related Categories: AJAX, JavaScript, ColdFusion
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.
ColdFusion Development Blog by Scott Bennett: CFWindow Event Listeners
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);
ColdFusion Development Blog by Scott Bennett: CFWindow Event Listeners
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>
ColdFusion Development Blog by Scott Bennett: CFWindow Event Listeners
<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>
ColdFusion Development Blog by Scott Bennett: CFWindow Event Listeners