asked on

Create tabs inside cflayout area

Hi,

I try to add a tabs who is set inside a layout of a cflayout border area.

Here is my code

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true" bindonload="true"></cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                <cflayout type="tabTest" name="tabLayout"></cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window

So i need to add a link in the left layout (call left) who create a tab inside the tabTest Layout with a url.

Thanks in advance.

Mike

gdemaria

The format for your cflayout tab is not correct, the type should be "tab"

Check out this example

<cflayout type="border">
    <cflayoutarea position="top">
        Here you can put your menu
    </cflayoutarea>
        <cflayoutarea position="left" name="test" title="Tree" splitter="true" minsize="150"
                    collapsible="true" size="200" source="tree.cfm" >
    </cflayoutarea>
    <cflayoutarea position="center" >
    <cflayout type="tab" name="tabs">
        <cflayoutarea name="tab1" title="Tab1" style="height:100%" source="grid.cfm" >
        </cflayoutarea>
        <cflayoutarea title="Tab2">
                another tab
        </cflayoutarea>
    </cflayout>
    </cflayoutarea>
</cflayout>

Open in new window

Brijesh Chauhan

The cflayout tag controls the appearance and arrangement of one or more child cflayoutarea regions

Try this, also there is no bindOnLoad attribute in CFLAYOUTAREA

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true">
                
                </cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                	<cflayout type="tab" name="tabLayout">
                    	<cflayoutarea title="Tab 1" style="background-color:##FFAAFF;" closable="true">
        					This is text in layout area 1
    						</cflayoutarea>
                   </cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window

Brijesh Chauhan

>>So i need to add a link in the left layout (call left) who create a tab inside the tabTest Layout with a url.

Here is how you can do it.. instead of URL I have a button, you can replace it with URL... test it out

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true">
                	<cfform>
    					<cfinput name="show" width="40" value="show tab" type="button" 
       					 onClick="ColdFusion.Layout.showTab('tabLayout', 'area2');">
					</cfform>
                
                </cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                	<cflayout type="tab" name="tabLayout">
                    	<cflayoutarea name="area2" title="Tab 2" inithide="true" 
            				style="background-color:##FFCCFF" >
       							 This is text in layout area 2
   							 </cflayoutarea>

                   </cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window

ASKER CERTIFIED SOLUTION

Coast Line

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial