Rob Featherpants asks:

I'm building ColdFusion sites again after a while away, and I wonder if you can help me with a little advice about cflayoutarea and tabs. I am building a tabbed interface as part of a form. Outside of the tabs is a textarea, with its height set as an inline style. I want to change this height when one of the tabs is selected and set a cookie to remember which tab was last active ... i.e. have onClick on the tab trigger a Javascript. Can I do this?

Yep, you can, although it does take a few lines of JavaScript.

ColdFusion provides an API to get access to the underlying Ext based TabPanel object. You can get this object by running:

var mytabs = ColdFusion.Layout.getTabLayout('mytabs');

If you check the Ext docs for TabPanel, you will see there is an 'on' API call that lets you easily add event listeners. I used this:

mytabs.on('tabchange', function(tabpanel,activetab) { console.log('changed to a new tab '+activetab.getText()); })

The tabchange event passes the tabpanel object and the active tab. I defined a function that simply uses Firebug to log the text of the selected tab. Here is a complete example. Please note I use AjaxOnLoad to run the code to register the event:

<html>

<head> <script> function setup() { var mytabs = ColdFusion.Layout.getTabLayout('mytabs'); mytabs.on('tabchange', function(tabpanel,activetab) { console.log('changed to a new tab '+activetab.getText()); }) } </script> </head>

<body>

<cflayout type="tab" name="mytabs">

<cflayoutarea title="Tab 1"> tab 1 </cflayoutarea>

<cflayoutarea title="tab 2"> tab 2 </cflayoutarea>

</cflayout>

</body> </html>

<cfset ajaxOnLoad('setup')>