A couple weeks ago I posted an entry on how to save the state of selected CFLayout generated tabs on a page. Then it was asked how that example could be expanded to save the state of multiple tab layouts on a page. I have created an example of how to do that below.
The first thing I had to do was add a listener for each of the tab layouts. Then instead of creating a separate SaveActiveTab() function for each of the individual layouts, I made one that takes the arguments that are automatically passed to the listener by the tabChange event. The event passes two objects, the tab layout object (Ext.TabPanel) and the active tab object (Ext.TabPanelItem). The SaveActiveTab function is now set up to pass the name of the CFLayout as the name of the session variable and the name of the selected tab as the value of the session variable to the SetSessionVar function in session.cfc (I didn't include the session.cfc in this entry but you can get it from my original post if you need it).
<html>
<head>
<title>Save Multiple Active Tabs Example</title>
<cfajaxproxy cfc="session" jsclassname="CFCs.session">
<cfset AjaxOnLoad("addTabChangeListener")>
<script language="JavaScript">
//this is the function that adds the listeners to
//the tabchange events in the tab objects
addTabChangeListener = function(){
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout1");
myTabs.on('tabchange',SaveActiveTab);
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout2");
myTabs.on('tabchange',SaveActiveTab);
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout3");
myTabs.on('tabchange',SaveActiveTab);
}
//this is the listener that will call the session.cfc
//every time a tab is selected
SaveActiveTab = function(TabLayout,ActiveTab){
var SessionObj = new CFCs.session();
SessionObj.setErrorHandler(errorHandler);
SessionObj.SetSessionVar(TabLayout.el.id, ActiveTab.id);
}
//this is an error handler used when calling the cfc
errorHandler = function(statusCode,statusMsg) {
alert(statusCode+': '+statusMsg)
}
</script>
</head>
<body>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout1">
<cfif session.MyTabLayout1 eq "tab1_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_1" selected="#isSelected#" title="Tab 1_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_2" selected="#isSelected#" title="Tab 1_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_3" selected="#isSelected#" title="Tab 1_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_4" selected="#isSelected#" title="Tab 1_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout2">
<cfif session.MyTabLayout2 eq "tab2_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_1" selected="#isSelected#" title="Tab 2_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_2" selected="#isSelected#" title="Tab 2_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_3" selected="#isSelected#" title="Tab 2_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_4" selected="#isSelected#" title="Tab 2_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout3">
<cfif session.MyTabLayout3 eq "tab3_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_1" selected="#isSelected#" title="Tab 3_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_2" selected="#isSelected#" title="Tab 3_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_3" selected="#isSelected#" title="Tab 3_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_4" selected="#isSelected#" title="Tab 3_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
</body>
</html>
<head>
<title>Save Multiple Active Tabs Example</title>
<cfajaxproxy cfc="session" jsclassname="CFCs.session">
<cfset AjaxOnLoad("addTabChangeListener")>
<script language="JavaScript">
//this is the function that adds the listeners to
//the tabchange events in the tab objects
addTabChangeListener = function(){
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout1");
myTabs.on('tabchange',SaveActiveTab);
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout2");
myTabs.on('tabchange',SaveActiveTab);
myTabs = ColdFusion.Layout.getTabLayout("MyTabLayout3");
myTabs.on('tabchange',SaveActiveTab);
}
//this is the listener that will call the session.cfc
//every time a tab is selected
SaveActiveTab = function(TabLayout,ActiveTab){
var SessionObj = new CFCs.session();
SessionObj.setErrorHandler(errorHandler);
SessionObj.SetSessionVar(TabLayout.el.id, ActiveTab.id);
}
//this is an error handler used when calling the cfc
errorHandler = function(statusCode,statusMsg) {
alert(statusCode+': '+statusMsg)
}
</script>
</head>
<body>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout1">
<cfif session.MyTabLayout1 eq "tab1_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_1" selected="#isSelected#" title="Tab 1_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_2" selected="#isSelected#" title="Tab 1_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_3" selected="#isSelected#" title="Tab 1_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout1 eq "tab1_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab1_4" selected="#isSelected#" title="Tab 1_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout2">
<cfif session.MyTabLayout2 eq "tab2_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_1" selected="#isSelected#" title="Tab 2_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_2" selected="#isSelected#" title="Tab 2_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_3" selected="#isSelected#" title="Tab 2_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout2 eq "tab2_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab2_4" selected="#isSelected#" title="Tab 2_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
<table width="95%" align="center"><tr><td>
<cflayout type="tab" name="MyTabLayout3">
<cfif session.MyTabLayout3 eq "tab3_1"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_1" selected="#isSelected#" title="Tab 3_1" style="height:100%">
This is Tab 1
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_2"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_2" selected="#isSelected#" title="Tab 3_2" style="height:100%">
This is Tab 2
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_3"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_3" selected="#isSelected#" title="Tab 3_3" style="height:100%">
This is Tab 3
</cflayoutarea>
<cfif session.MyTabLayout3 eq "tab3_4"><cfset isSelected="true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea name="tab3_4" selected="#isSelected#" title="Tab 3_4" style="height:100%">
This is Tab 4
</cflayoutarea>
</cflayout>
</td></tr></table>
</body>
</html>
The last thing we need to do to get this to work, is to modify the OnSessionStart function in my application.cfc so that there is a default session variable for each of the CFLayouts.
<cffunction name="OnSessionStart" hint="Fires when the session is first created." access="public" returntype="void" output="false">
<!--- Return out. --->
<cfset session.MyTabLayout1= "tab1_1">
<cfset session.MyTabLayout2= "tab2_1">
<cfset session.MyTabLayout3= "tab3_1">
<cfreturn>
</cffunction>
<!--- Return out. --->
<cfset session.MyTabLayout1= "tab1_1">
<cfset session.MyTabLayout2= "tab2_1">
<cfset session.MyTabLayout3= "tab3_1">
<cfreturn>
</cffunction>
Comments (2) | 9157 Views
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
I really like this example of cfajaxproxy. You've brought a number of new CF8 features together in one easy example. It's sparking my creativity. :-) Thanks!
# Posted By Dan Sorensen
| 12/3/07 5:07 PM
Thanks Scott that worked first time; really great stuff.
# Posted By Charles
| 12/3/07 8:01 PM
[Add Comment]
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.