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')>