Michael Asked:

"Is there any way to add a minimize button to a CFWindow? "

As a matter of fact, the Ext.BasicDialog object that powers the CFWindow tag does have a "collapsible" configuration option. However, Adobe did not add that as an attribute in the CF8 implementation of CFWindow. They currently have it hard-coded so that all CFWindow generated dialogs are set to "collapsible:false". Hopefully they will add a collapsible attribute to the CFWindow tag in some future release, but until then, adding the Minimize/Maximize button onto the CFWindow tool bar is a fairly painless job with the snippet of JavaScript that you can find below.

Click here to view the working sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <script language="JavaScript">
function init(){
       //Add the Collapse Button to the cfwindows toolbox       
      myWindow = ColdFusion.Window.getWindowObject('MyWindow');
      myWindow.collapseBtn=myWindow.toolbox.createChild({cls:"x-dlg-collapse"});
      myWindow.collapseBtn.on("click",myWindow.collapseClick,myWindow);
      myWindow.collapseBtn.addClassOnOver("x-dlg-collapse-over");
      myWindow.header.on("dblclick",myWindow.collapseClick,myWindow);
}
</script>
<title>Collapsible CFWindow</title>
</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 Minimize / Maximize button"
   width="400">

Collapsible window
</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>

One thing you will notice is that the button for minimizing/maximizing the window doesn't really match the default style used by CFWindow. If you want to fix this, you can create your own images for those two buttons that match the color scheme better, then override the following CSS classes:

.x-dlg .x-dlg-collapse {
background-image:url(../images/default/basic-dialog/collapse.gif);
}
.x-dlg-collapsed .x-dlg-collapse {
background-image:url(../images/default/basic-dialog/expand.gif);
}
.x-dlg .x-dlg-close-over, .x-dlg .x-dlg-collapse-over {
}

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Sami Hoda's Gravatar Nice.
# Posted By Sami Hoda | 3/11/08 7:54 PM
Michael Brennan-White's Gravatar Scott,

That is awesome and exactly what I was hoping for. I wish Adobe would have allowed us the full Ext feature set.

Thank you very much,

Michael
# Posted By Michael Brennan-White | 3/11/08 9:22 PM
Andrew Maurer's Gravatar You should blog more Scott... I also saw your post on coldfusionjedi about WoW. You're UBER! MUHAHA
# Posted By Andrew Maurer | 4/9/08 1:07 AM
Andrew Clark's Gravatar Sweet
How would you initialize the window in a collapsed state?
# Posted By Andrew Clark | 12/12/08 10:47 PM
Scott Bennett's Gravatar @Andrew Clark,

you should be able to just the the line:

myWindow.collapseClick();

to the end of the end of the init function in my example above.
# Posted By Scott Bennett | 12/16/08 1:59 PM
T's Gravatar For some reason I cannot see the min. button...and i have copied
and pasted the exact code. Can someone help me please!
# Posted By T | 5/20/09 10:53 AM
 
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.