Tab Panel Examples

Note that the js and css is not minified so it is readable. See tabs-example.js for the tab creation code and tabs-example.css for the css.

Tabs without fixed height that resize to the content. Built from existing markup.

Here's my script:


var tabs = new Ext.TabPanel('tabs1');

tabs.addTab('script', "View Script");

tabs.addTab('markup', "View Markup");

tabs.activate('script');


<div id="tabs1">

    <div id="script" class="tab-content">

        (Content goes here)

    </div>

    <div id="markup" class="tab-content">

        (Content goes here)

    </div>

</div>

Tabs with fixed height that scroll the content. Built entirely with javascript.

Tab 1 is a normal tab with content passed when adding it.
Tab 2 is loaded via Ajax. It was set up using the standard UpdateManager functionality. It reloads it's content every time it's activated.
Tab 3 is loaded via Ajax too. It was set up using setUrl() a convenience method that will do everything done on tab 2 and also has the ability to set it to load only once.
Tab 4 has an event listener attached.
Tab 5 is disabled.