Adding A Minimize Button To Your CFWindow

Posted By : todd sharp Posted At : February 13, 2008 12:54 PM Posted In: Ext, Ajax, ColdFusion

10

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

<script>
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);
//add the class to swap the image on mouse over

w.collapseBtn.addClassOnOver("x-dlg-collapse-over");
}

</script>

<cfset ajaxOnLoad('createWin') />

Demo

5134 Views Send Print Comments (10)

Comments (10)

Subscribe to Comments Add Comment

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

Posted by: Jason on: 2/13/08 3:32 PM

spiraldev's Gravatar 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 on: 2/13/08 3:36 PM

Tom Mollerus's Gravatar 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 on: 2/13/08 4:16 PM

todd sharp's Gravatar 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 on: 2/13/08 4:21 PM

Sam Farmer's Gravatar Very cool. Can it minimize to the bottom left of the browser window?

Posted by: Sam Farmer on: 2/13/08 6:55 PM

todd sharp's Gravatar 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 on: 2/14/08 10:25 AM

todd sharp's Gravatar 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 on: 2/14/08 11:20 AM

Don Li's Gravatar 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 on: 2/17/08 11:29 PM

Jackie's Gravatar Nice one.

Posted by: Jackie on: 5/23/08 2:09 PM
Add Comment

  • Calendar

    << March 2010 >>
    Sun Mon Tue Wed Thu Fri Sat
     123456
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31    

  • Subscribe

    • Enter your email address to subscribe to this blog.