<cfsilence>

Adding A Minimize Button To Your CFWindow

Posted At : February 13, 2008 1:54 PM | Posted By : todd sharp
Related Categories: Ext, ColdFusion, Ajax

Here's a quick example of how to add a functional minimize button to your CFWindow.

Demo

Comments (10) |

Print |

Send |

Code |

del.icio.us |

Linking Blogs | 4124 Views

Comments

[Add Comment]

Nice. I like the skin job you did to the cfwindow. Care to elaborate on that aspect of it?

# Posted By Jason | 2/13/08 3:32 PM

How do you change the style of the window? Your's is a nice blue and I have an ugly teal/whatever color.

# Posted By spiraldev | 2/13/08 3:36 PM

Here ya go:

http://cfsilence.com/blog/client/index.cfm/2008/2/...

# Posted By todd sharp | 2/13/08 4:00 PM

So '.collapseClick' is a built-in method of ColdFusion Windows, eh? Is this documented somewhere on Adobe's site, or in Ext?

# Posted By Tom Mollerus | 2/13/08 4:16 PM

Well CF exposes certain things via tag attributes/JS config options - the collapsible option was *not* exposed by them for whatever reason. However, tapping into the underlying Ext.BasicDialog object allowed me to add the functionality. Essentially anything you can do with an Ext object you can do by tapping into the CF exposed object.

Make sense?

# Posted By todd sharp | 2/13/08 4:21 PM

Very cool. Can it minimize to the bottom left of the browser window?

# Posted By Sam Farmer | 2/13/08 6:55 PM

How bout this Sam: Add another click listener, if the current state is collapsed move the window to wherever:

createWin = function(){
ColdFusion.Window.create('Window1', 'This is a CF window','win.cfm',{x:100,y:100,height:300,width:400,modal:false,closable:true,collapsible:true,draggable:true,resizable:true,center:true,initshow:true})
//get the Ext window object
   var w = ColdFusion.Window.getWindowObject('Window1');
   //add the class for the collapse button
   w.collapseBtn = w.toolbox.createChild({cls:"x-dlg-collapse"});
   //add a listener for the collapse click
w.collapseBtn.on("click", w.collapseClick, w);
w.collapseBtn.on("click", moveWin, w);
//add the class to swap the image on mouse over
w.collapseBtn.addClassOnOver("x-dlg-collapse-over");
}

moveWin = function(){
   var win = ColdFusion.Window.getWindowObject('Window1');
   if(win.collapsed){
      win.moveTo(10,10);
   }
}

# Posted By todd sharp | 2/14/08 10:25 AM

Even cooler:

createWin = function(){
ColdFusion.Window.create('Window1', 'This is a CF window','win.cfm',{x:100,y:100,height:300,width:400,modal:false,closable:true,collapsible:true,draggable:true,resizable:true,center:true,initshow:true})
//get the Ext window object
   var w = ColdFusion.Window.getWindowObject('Window1');
   //add the class for the collapse button
   w.collapseBtn = w.toolbox.createChild({cls:"x-dlg-collapse"});
   //add a listener for the collapse click
w.collapseBtn.on("click", w.collapseClick, w);
w.collapseBtn.on("click", moveWin, w);
//add the class to swap the image on mouse over
w.collapseBtn.addClassOnOver("x-dlg-collapse-over");
}

moveWin = function(){
   var win = ColdFusion.Window.getWindowObject('Window1');
   var e = win.getEl();
   var s = win.shadow.el;

   if(win.collapsed){
      e.alignTo(document, "bl", [0,-30], true);
      s.alignTo(document, "bl", [0,-30], true);
   }
}

This will animate the window to minimize to the bottom left.

# Posted By todd sharp | 2/14/08 11:20 AM

This is very neat. However, the x and y coordinates are not working for me nor is the CSS file. I've tried both IE7 and FF2, also, have tried to initialize the two functions via cfajaxload and on adajaxload and the other with BODY onload to no avail. Any idea?

Thanks.

Don

# Posted By Don Li | 2/17/08 11:29 PM

Nice one.

# Posted By Jackie | 5/23/08 2:09 PM

[Add Comment]