Adding tabs dynamically

A scenario found in many web applications is the dynamic addition of tabs to a TabPanel. This recipe teaches you a simple way of using a button that, when it is clicked on, executes code that creates a tab, as shown in the following screenshot:

How to do it...

1. 1. Define the TabPanel:

   Ext.onReady(function() {
   var tabs=new Ext.TabPanel({
   renderTo: 'tabs',
   resizeTabs: true,
   minTabWidth: 115,
   tabWidth: 135,
   enableTabScroll: true,
   width: 500,
   height: 250,
   defaults: { autoScroll: true }
   });
   

2. 2. Add a few tabs to start up with:

   // Create some tabs.
   var index=0;
   while (index < 3) {
   addTab(index);
   index++;
   }
   

3. 3. Create a function that adds tabs dynamically:

   function addTab(index) {
   var tab=tabs.add({
   title: 'New Tab ' + (index),
   iconCls: 'icon-tab',
   bodyStyle:'padding: 5px',
   HTML: 'Tab Body ' + (index) + '<br/><br/>',
   closable: true
   });
   tab.show();
   }
   

4. 4. Define a button that will call the newly created function:

   var btn=new Ext.Button({
   text: 'Add a tab',
   handler...