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:
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
<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>
Comments (2) | 7427 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
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!
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);
}