Michael Asked:
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.
<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:
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 {
}
Comments (6) |
10947 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
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
How would you initialize the window in a collapsed state?
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.
and pasted the exact code. Can someone help me please!