In a previous entry I demonstrated how you can use the underlying Ext framework to enhance your CFWindow. And then Matt left a comment asking if it was possible to dynamically resize the CFWindow. The answer is yes and it's quite easy actually. The CFWindow utilizes the Ext.BasicDialog object which has a function called setContentSize, which resizes the dialog to fit the specified content size.

This function can be used within your JavaScript pretty easily.

Here is a simple function that takes in windowName, height, and width attributes and will resize the specified CFWindow:

<script language="JavaScript">
   resizeWindow = function(windowName,width,height){
      //Get window object       
      myWindow = ColdFusion.Window.getWindowObject(windowName);
      
      //use the setContentSize function to resize the window.       
      myWindow.setContentSize(width, height);
      
   }
</script>

For the more practical example below, I took my original example of using the CFWindow tag as an alert box, and I set it up so that the more error messages there are the bigger the window gets. This will make sure that all the error messages are visible at all times, but there is not a lot of extra space if there are only 1 or 2 messages.

View working sample of the code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFWindow as Alert</title>
   <!--- import the button.js script to power the OK button --->
   <script src="/CFIDE/scripts/ajax/ext/package/button/button.js" type="text/javascript"></script>
   <script language="JavaScript">
      init = function(){
         //Get window object          
         myWindow = ColdFusion.Window.getWindowObject('ErrorWindow');
         
         //create an OK button          
         myWindow.addButton("OK", closeErrWin);
      }
      ThrowError = function(errMsg,height,width){
         //Get window object          
         myWindow = ColdFusion.Window.getWindowObject('ErrorWindow');
         
         //put the error message in the body          
         myWindow.body.update(errMsg);
         
         //check window heght meets minimum size of 75          
         if (height < 75){
            height=75;
         }
         
         //set the window size          
         myWindow.setContentSize(width, height);
         
         //Show the window          
         ColdFusion.Window.show('ErrorWindow');
      }
      closeErrWin = function(){
         //Close the error window          
         ColdFusion.Window.hide('ErrorWindow');
      }
      checkForm = function(){
         errMsg = "";
         errorCnt = 0;
         //check required numeric field          
         if (MyForm.MyNumberField.value == "" || isNaN(MyForm.MyNumberField.value)){
            errMsg = (errMsg + "<li><font color=800000>Please enter a Numeric value in the Number field</font></li>");
            errorCnt = errorCnt+1;
         }
         //check required string field          
         if (MyForm.MyStringField1.value == ""){
            errMsg = (errMsg + "<li><font color=800000>Please enter a string value in the String1 field</font></li>");
            errorCnt = errorCnt+1;
         }
         //check required string field          
         if (MyForm.MyStringField2.value == ""){
            errMsg = (errMsg + "<li><font color=800000>Please enter a string value in the String2 field</font></li>");
            errorCnt = errorCnt+1;
         }
         //check required string field          
         if (MyForm.MyStringField3.value == ""){
            errMsg = (errMsg + "<li><font color=800000>Please enter a string value in the String3 field</font></li>");
            errorCnt = errorCnt+1;
         }
         //if any errors were, found call the TrowError function          
         if (errMsg != ""){
            //Calculate height needed based on how many errors occured             
            height=errorCnt*35;
            width=400;
            ThrowError('<b>Please fix the following errors:</b><br><ul>' + errMsg + '</ul>',height,width)
         }
         else{
            //otherwise, submit the form             
            MyForm.submit();
         }
         
      }
   </script>   
</head>
<body>
<!--- simple form --->
<form name="MyForm">
<b>Number:</b> <input type="Text" name="MyNumberField"><br>
<b>String1:</b> <input type="Text" name="MyStringField1"><br>
<b>String2:</b> <input type="Text" name="MyStringField2"><br>
<b>String3:</b> <input type="Text" name="MyStringField3"><br>
<input type="button" value="Submit" onclick="checkForm();">
</form>
<!--- set up the error window. --->
<cfwindow
name="ErrorWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
modal="true"
refreshOnShow = "false"
resizable="true"
title="An Error Occured"
width="400">


</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Cody Kratzer's Gravatar I am trying to resize a cfwindow for my clients page and I am being told by firebug that .setContentSize is not a function. Do you know what would cause this error?

Also, I tried using .width=x and .height=x and it works but only one time. When I try to set them to something else in a different function the attributes I set are ignored. Could you help me with that as well?

Thank you so much for your time!
# Posted By Cody Kratzer | 3/17/10 4:18 PM
Scott Bennett's Gravatar I did some digging and it looks like the setContentSize() function that works in CF8 is changed to setSize() in CF9. Also it appears that in the CF9 implementation if you set the "initShow" attribute in the cfwindow tag to "false" then you have to open the show the window before you can access the body of the window. So for CF9 Users change the ThrowError function in my sample to this:

ThrowError = function(errMsg,height,width){
//Show the window
ColdFusion.Window.show('ErrorWindow');
      
       //Get window object
myWindow = ColdFusion.Window.getWindowObject('ErrorWindow');

//put the error message in the body
myWindow.body.update(errMsg);

//check window heght meets minimum size of 75
if (height < 75){
height=75;
}

//set the window size
myWindow.setSize(width, height);

}
# Posted By Scott Bennett | 3/29/10 8:32 PM
 
Home | Blog | Contact | © 2001 - 2021 The ColdFusion Guy - Scott Bennett. All rights reserved.