Handling tab activation

This recipe explains how you can execute code when a TabPanel's tab is activated. In this recipe's sample tab panel, activating the second tab initiates a request, which will populate the tab with server-side data. You can see this in the following screenshot:

How to do it...

1. 1. Define the TabPanel and add a listener for the activate event:

   Ext.onReady(function() {
   var tabs = new Ext.TabPanel({
   renderTo: document.body,
   activeTab: 0,
   width: 500,
   height: 250,
   plain: true,
   defaults: { autoScroll: true },
   items: [{
   title: 'First Tab',
   HTML: ""
   },{
   title: 'Load on tab activation',
   bodyStyle: 'padding:5px;',
   listeners: { activate: activationHandler }
   }]
   });
   

2. 2. Create the handler function for the activate event:

   function activationHandler(tab) {
   tab.load({ url: 'tabs-ajax-load.php', params: 'xaction=load' });
   }
   });
   

How it works...

The activate event indicates that a panel has been visually activated. The handler for this event is passed a reference to the activated panel.

Panels...