Responding to tab changes with CFLAYOUT

Pete asked an interesting question about ColdFusion's CFLAYOUT tags. He was making use of a tabbed layout within a border layout control. He needed to refresh one of the layout panels when the tab control was modified. As with all questions in this area, I did my research by looking into the Ext docs, which, unfortunately, Sencha makes it a pain in the rear to find. Here's the docs for 3.4, but keep in mind ColdFusion is using 3.1. (Edit: Twitter user Maertsch sent me this link for Ext 3.1.1 docs. It looks to be off the official Sencha site though. Anyone care to explain why Sencha is hiding their docs?) I knew there would be a way to listen in for tab changes, I just had to research what the event type was and how to listen for it. Here's how I solved Pete's question.

First, I created the layout. My code has a border style layout for the page as a whole, and one of the panels is a tab.

<html>

<head> </head>

<body> <cflayout type="border">

<cflayoutarea position="left" size="250" name="left" source="left.cfm" />

<cflayoutarea position="center" >

<cflayout type="tab" name="tabset"> <cflayoutarea title="Tab A"> Tab A </cflayoutarea> <cflayoutarea title="Tab B"> Tab B </cflayoutarea> <cflayoutarea title="Tab C"> Tab C </cflayoutarea> </cflayout>

</cflayoutarea>

</cflayout>

</body> </html>

I made left.cfm a bit dynamic so I could test my changes later on. All it does is cfdump the URL scope so I won't bother sharing that one line of code.

My first change was to register a JavaScript function to run when the client-side code was done running. ColdFusion supports this with a ajaxOnLoad function:

<cfset ajaxOnLoad("init")>

And then here is the init function:

function init(){ mytabs = ColdFusion.Layout.getTabLayout("tabset"); mytabs.on('tabchange',function(tablayout,tab) { console.log('tab changed'); ColdFusion.navigate("left.cfm?tab="+tab.title, "left"); }); }

Not much, right? ColdFusion provides a helper function to retrieve the underlying Ext objects for all it's UI elements. This includes the tab layout of course. Once I have the "real" object it's a matter of checking the Ext docs. If you've never seen Ext's code before you can still figure out what the above is doing. I've added a handler to listen to the tab change event. Ext passes the tab layout and the tab itself. For my demo, I simply take out the title of the tab and pass it to the left panel by using ColdFusion.navigate function. I've pasted the entire template below and you can play with the demo here.

<html>

<head> <script> function init(){ mytabs = ColdFusion.Layout.getTabLayout("tabset"); mytabs.on('tabchange',function(tablayout,tab) { console.log('tab changed'); ColdFusion.navigate("left.cfm?tab="+tab.title, "left"); }); } </script> </head>