Sam Farmer

Growing up I never imagined I would play bass guitar for the Dave Matthews Band. And indeed it never happened.

But I have become passionate about making software.

Adding ExtJS Effects to cfwindow

January 15, 2010

Underneath the hood cfwindow uses ExtJS to make modal windows.  This means with a little bit of JavaScript its possible to add effects to a cfwindow.  First lets create a cfwindow:

<cfwindow name="myWindow" title="My Window" initshow="true">
<div id="windowContent">
     Some text about how cool something is.<br><br>
     Some text about how cool something is.<br><br>
     Some text about how cool something is.<br><br>
</div>
</cfwindow>

 

Nothing special here.  To tie it in with some ExtJS effects we need to get at its inners using the ColdFusion.Window.getWindowObject() function.  In the example below once we get the window object we add a listener to it using the shorthand ExtJs notation of "on" to look for when the mouse enters and leaves the window.  When the mouse enters we log to the console the id of the element (it can be useful to know the id of it) and then perform a highlight effect on the windowContent div.  When the mouse leaves we hide the window.

<script type="text/javascript">
Ext.onReady(function(){
var myWin = ColdFusion.Window.getWindowObject( 'myWindow' );
myWin.getEl().on( {
     'mouseenter': function(){     
          console.log(this.id);
          Ext.get('windowContent').highlight(    
          "ffff9c", { endColor: "ffffff"     });
     },
     'mouseleave': function(){ ColdFusion.Window.hide( 'myWindow' );}
});
});
</script>

 

Thats it!  ExtJs has a bunch of cool effects that can be applied to an element.

Here's a short screencast showing the code above in action:


No Comments

Some comments have been lost over the years due to moving hosts.

More


More blog entries that I have written.

Code coloring by PRISM.