• uid is an id for the tab panel component. It can be any text string, but there has to be a unique uid for every tab panel component onthe visualforce page.
• rowStyle specifies a style class that is associated with the ul.x-tab-strip. The two classes are defined in the component code as:
  • onerow - The width defined in onerow should be large enough so that all of your tabs show in a single row. If the number of tabs require more than the width specified, the row will wrap. Be aware that this also expands the width of the tab component, which can result in a lot of scrolling.
  • multirow - The width for multi row should always be "100%". This will cause the tab row to wrap to fit the size of the browser window and to dynamically expand or contract if the browser window side changes.

• rowStyle = "oneRow" - tab headers in a long single row. Note how the tab area is stretched to width specified in the onerow style class.
• ​rowStyle = "multirow" - tab headers wrapped into multiple rows to fit the browser window size.

<apex:component id="theTabPanel">
    <apex:attribute name="width" type="String" description="Width of tab panel"/>
    <apex:attribute name="uid" type="String" description="Unique for each time tab panel component used on page" required="true"/>
    <apex:attribute name="rowStyle" type="String" description="Options are onerow for one long row of tabs or multirow for wrapped tabs in current frame" required="true" />
   
    <apex:includeScript value="{!urlFor($Resource.extjs21, '/ext-2.1/adapter/ext/ext-base.js')}"/>
    <apex:includeScript value="{!urlFor($Resource.extjs21, '/ext-2.1/ext-all.js')}"/>
    
    <apex:stylesheet value="{!urlFor($Resource.extjs21, '/ext-2.1/resources/css/ext-all.css')}"/>

<!-- Add styles to allow for one row or multirow tab strip
  
     Always use 100% for multirow width
     
     Use a large pixel value for onerow width. The tabs will wrap once 
     the pixel value is used up. But if the pixel value is too large, 
     the resulting window will have to scroll.
-->
    <style>
        .onerow ul.x-tab-strip {width: 1500px !important;}
        .multirow ul.x-tab-strip {width: 100% !important;}
    </style>    

<!-- Apply rowStyle - onerow or multirow - as style class to outputPanel -->  
    <apex:outputPanel id="theTab"  styleClass="{!rowStyle}"/>

    <script>
        var currentTabPanelItems{!uid} = [];
    </script>    
    <apex:componentBody />
    
    <script>    
        Ext.onReady(function () {
                // basic tabs, built from existing content
            var tabs{!uid} = new Ext.TabPanel({
                renderTo: '{!$Component.theTab}',
                width: '{!nullValue(width, '100%')}',
                activeTab: 0,
                frame: true,
                defaults: {autoHeight: true},
                items: currentTabPanelItems{!uid}
            });
        });
    </script>
</apex:component>