Responding to tab changes with CFLAYOUT

This post is more than 2 years old.

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">

&lt;cflayoutarea position="left" size="250" name="left" source="left.cfm" /&gt;

&lt;cflayoutarea position="center" &gt;

	&lt;cflayout type="tab" name="tabset"&gt;
		&lt;cflayoutarea title="Tab A"&gt;
			Tab A
		&lt;/cflayoutarea&gt;
		&lt;cflayoutarea title="Tab B"&gt;
			Tab B
		&lt;/cflayoutarea&gt;
		&lt;cflayoutarea title="Tab C"&gt;
			Tab C
		&lt;/cflayoutarea&gt;
	&lt;/cflayout&gt;

&lt;/cflayoutarea&gt;

</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>

<body> <cflayout type="border">

&lt;cflayoutarea position="left" size="250" name="left" source="left.cfm" /&gt;


&lt;cflayoutarea position="center" &gt;

	&lt;cflayout type="tab" name="tabset"&gt;
		&lt;cflayoutarea title="Tab A"&gt;
			Tab A
		&lt;/cflayoutarea&gt;
		&lt;cflayoutarea title="Tab B"&gt;
			Tab B
		&lt;/cflayoutarea&gt;
		&lt;cflayoutarea title="Tab C"&gt;
			Tab C
		&lt;/cflayoutarea&gt;
	&lt;/cflayout&gt;

&lt;/cflayoutarea&gt;

</cflayout>

</body> </html>

<cfset ajaxOnLoad("init")>

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Erol Layiktez posted on 10/14/2013 at 9:48 PM

Hello Raymond,
I just realized a behavior change in CF8 to CF10 in cflayout tabs.
In CF8 my tabs were all loading as they are selected
The same code in CF10 loads all the tabs, and I am not sure in which order.
but it this is causing problems.
I played with refreshonactivate="True" and bindOnLoad= "false" but no luck having CF10 tabs loading as they get selected like in CF8.
Do you know anything about this?
Thanks much!

Comment 2 by Raymond Camden posted on 10/14/2013 at 10:16 PM

Sorry - no. I'm avoiding the CF UX stuff like the plague nowadays.

Comment 3 by Erol Layiktez posted on 10/15/2013 at 2:29 AM

Smart...
I wish someone warned me about this before.. Now that it all broke in CF10, I am really regretting that I used CF UX stuff in such a large scale in my project...
Thank you Raymond!

Comment 4 by Raymond Camden posted on 10/15/2013 at 4:58 AM

Sorry I wasn't helpful. :)

Comment 5 by Artfuldgr posted on 7/26/2016 at 5:38 PM

sencha in cf is a pain in the arse... all day just to try to change the tab height, and colors, etc

Comment 6 (In reply to #5) by Raymond Camden posted on 7/27/2016 at 12:50 PM

Which is why I've been saying for years now to avoid these UI tags. I'm sorry I wrote about them at all. :)